.accordion {
  margin-top: $base-spacing-4x;
  margin-bottom: $base-spacing-4x;

  &.basic {

  }

  .accordion-group:last-child {
    border-bottom: 1px solid $nobel-300;
  }

  .accordion-title {
    padding: $base-spacing;
    border-top: 1px solid $nobel-300;
    color: $base-black;
    cursor: pointer;
    transition: all ease-out 0.3s;
    display: flex;
    align-items: center;

    .accordion-text {
      flex-grow: 1;
    }

    h5 {
      line-height: 1;
    }

    p {
      margin-top: $base-spacing-half;
      margin-bottom: 0;
      line-height: 1;
      letter-spacing: 0;
    }

    &::after {
      // https://stackoverflow.com/questions/61099149/svg-fill-color-not-working-with-hex-colors
      // to use hex color for fill with svg in data uri, need to change # to %23
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
      width: 24px;
      height: 24px;
      padding-left: $base-spacing;
    }
  }

  .accordion-title.active {
    ~ .accordion-body {
      padding: $base-spacing;

      p {
        margin: 0;
      }
    }

    &::after {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4043523 L20.7343997,7.20340672 Z" transform="matrix(1 0 0 -1 0 24)"/></svg>');
    }
  }

  .accordion-body {
    padding: 0 $base-spacing;
    max-height: 0;
    overflow: hidden;
    transition: max-height ease-out 0.3s;
  }

}