Accordion: refactor

app/styles/application.scss

@@ -71,6 +71,7 @@
 @import 'components/filters';
 @import 'components/mfa_form';
 @import 'components/snackbar';
+@import 'components/accordion';
 
 // Holiday
 @import 'holiday/halloween';

app/styles/basics.scss

@@ -159,50 +159,6 @@ body {
   color: #ffffff;
 }
 
-.explanation-box,
-.accordion {
-  color: var(--primary-text-color);
-  padding: 15px 20px;
-  font-size: 14px;
-  background-color: var(--brand-color--faint);
-  margin: 5px 20px;
-  border-radius: 8px;
-
-  &__title {
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  &__explanation {
-    margin-top: 1em;
-  }
-
-  a {
-    color: var(--brand-color--hicontrast);
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.accordion {
-  margin: 0;
-
-  .accordion_content {
-    transition-duration: 0.2s;
-
-    &.expanded {
-      display: block;
-    }
-
-    &.closed {
-      display: none;
-    }
-  }
-}
-
 noscript {
   text-align: center;
 

app/styles/components/accordion.scss

@@ -0,0 +1,63 @@
+.explanation-box {
+  margin: 5px 20px;
+}
+
+.explanation-box,
+.accordion {
+  color: var(--primary-text-color);
+  padding: 15px 20px;
+  font-size: 14px;
+  background-color: var(--brand-color--faint);
+  border-radius: 8px;
+  margin: 0;
+
+  &__title {
+    font-weight: bold !important;
+    font-size: 16px !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    text-transform: none !important;
+    text-align: left !important;
+    display: flex !important;
+
+    &::after {
+      content: '';
+      display: block;
+      font-family: ForkAwesome;
+      font-size: 20px;
+      padding-left: 10px;
+      margin-left: auto;
+    }
+  }
+
+  &__content {
+    height: 0;
+    overflow: hidden;
+  }
+
+  &--expanded &__title {
+    margin-bottom: 10px !important;
+
+    &::after {
+      content: '';
+    }
+  }
+
+  &--expanded &__content {
+    height: auto;
+  }
+
+  &__explanation {
+    margin-top: 1em;
+  }
+
+  a {
+    color: var(--brand-color--hicontrast);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/styles/forms.scss

@@ -679,14 +679,24 @@ code {
   max-height: 100px;
 }
 
-.code-editor textarea {
-  font-family: monospace;
-  white-space: pre;
-}
+.code-editor {
+  textarea {
+    font-family: monospace;
+    white-space: pre;
+  }
 
-.code-editor--invalid textarea {
-  border-color: $error-red !important;
-  color: $error-red;
+  &--invalid textarea {
+    border-color: $error-red !important;
+    color: $error-red;
+  }
+
+  .input {
+    margin-bottom: 0;
+  }
+
+  .hint {
+    margin-top: 10px;
+  }
 }
 
 .input .row .fa-times-circle {