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

section.component-faq {
  .faq-wrap {
    .faq-item {
      padding: $space-xs 0;
      border-bottom: 1px solid $gray200;
      &:last-child {
        border-bottom: none;
      }
      .faq-question {
        position: relative;
        cursor: pointer;
        &::after {
          position: absolute;
          content: "+";
          content: url(theme-url("/assets/icons/arrow-down.svg"));
          right: 0;
          top: 50%;
          transform: translate(-50%, -50%);
          line-height: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .faq-answer {
        display: none;
        margin: $space-xs 0;
        padding: 0;
      }
      &.active {
        .faq-question {
          &::after {
            transform: translate(-50%, -50%) rotate(180deg);
          }
        }
      }
    }
  }
}
