@use "../mixins" as *;
@use "../media" as *;

.faq {
    padding-block: var(--section-padding-y);

    &__title {
        text-align: center;
        line-height: 100%;

        @include mobile-s {
            text-align: start;
        }
    }

    &__list {
        margin-top: 2.5em;
    }

    &__item {
        padding: 1em;
        border-radius: var(--border-radius-30);
        background-color: var(--color-light-accent);
        transition: var(--transition-duration-03);

        &:not(:first-child) {
            margin-top: 1em;
        }
    }

    &__accordion {
        &-header {
            @include flex-center(space-between);

            column-gap: 20px;
            user-select: none;
            cursor: pointer;
        }

        &-title {
            padding: 0.5em;

            @include mobile {
                max-width: 80%;
            }
        }

        &-indicator {
            @include flex-center;
            @include square(40px);

            background-color: var(--color-light-accent-2);
            border-radius: var(--border-radius-15);
            position: relative;
            min-width: 40px;
            transition: background-color var(--transition-duration-03);

            @include hover {
                &:not(.faq__accordion-indicator--opened) {
                    background-color: var(--color-light-accent-3);
                }
            }

            & svg {
                @include abs-center;

                transition: transform var(--transition-duration-02);
            }

            &--opened {
                background-color: var(--color-accent);

                & svg {
                    transform: rotate(180deg);
                    color: var(--color-stable-dark);
                }
            }
        }

        &-body {
            margin-top: 0.5em;
            padding: 0.5em;
            max-width: 790px;
        }
    }
}