.faq {
  padding: 80px 20px 50px;

  &__tabs {
    padding: 30px 0;
  }

  &__single {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-3);
    cursor: pointer;
    transition: all 0.2s;

    &--active {
      background: var(--color-8);

      .faq {
        &__icon--vertical {
          transform: translateX(-50%) rotateZ(90deg);
        }

        &__question {
          color: var(--color-6);
          font-weight: 500;
        }

        &__answer {
          opacity: 1;
          visibility: visible;
          height: auto;
          padding-top: 10px;
        }
      }
    }
  }

  &__icon-wrapper {
    width: 50px;
    position: relative;
  }

  &__icon {
    position: absolute;
    top: calc(50% - 1px);
    left: 50%;
    transform: translateX(-50%);

    &--vertical {
      transition: all 0.2s;
    }
  }

  &__questions-wrapper {
    width: calc(100% - 50px);
    margin-left: 20px;
  }

  &__question {
    color: var(--color-4);
  }

  &__answer {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: all 0.2s;
  }
}