@import "variables";
@import "mixins";

.faq {
  margin: $space-lg 0 calc(#{$space-lg} * 2);
  .faq-hero {
    text-align: center;
    margin-bottom: 6rem;
    @include bp("md") {
      text-align: left;
    }
    h1 {
      color: $col-sec;
      @include underlined;
    }
  }
  .faq-container {
    .faq-content {
      max-width: 85rem;
      margin: 0 auto;
      .switch-button-wrapper {
        a {
          @include button;
          padding: $btn-pd !important;
          background-color: transparent !important;
          color: $col-prm !important;
          &:hover,
          &.active {
            color: $white !important;
            background-color: $col-prm !important;
          }
        }
      }
      .faq-list {
        box-shadow: none;
        padding: 0;
        border-radius: none;
        background: transparent;
        .faq-item + .faq-item {
          margin-top: 2.1rem;
        }
        .faq-item {
          position: relative;
          border-bottom: 1px solid $gray300;
          [type="checkbox"]:checked ~ .faq-answer {
            height: auto;
            opacity: 1;
            padding: $space-xxs 0 $space-sm;
            transition: 0.4s;
          }
          [type="checkbox"]:checked ~ .faq-question:after {
            content: url(theme-url("/assets/icons/arrow-down.svg")) !important;
            position: absolute;
            right: 0;
            transform: scaleY(-1) translate(0, -1rem) !important;
          }
          .faq-question {
            font-size: $fs-h4;
            font-weight: $fw-h4;
            font-family: $font-family-headings;
            color: $col-sec;
            padding: 0;
            cursor: pointer;
            &::after {
              content: url(theme-url("/assets/icons/arrow-down.svg")) !important;
              opacity: 1 !important;
              transform: none !important;
              font-size: 2.2rem;
              font-weight: normal;
              position: absolute;
              right: 0;
            }
          }
          .faq-answer {
            height: 0;
            display: block;
            padding: 0 0 $space-xxs;
            overflow: hidden;
            opacity: 0;
            transition: 0.3s;
          }
        }
      }
    }
  }
}
