@use "../common/utils" as *;
@use "../common/mixins" as *;


.faq-card {
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(var(--color-border));

    &:first-child {
        border-top: 1px solid rgba(var(--color-border));
    }

    .faq-question {
        display: flex;
        justify-content: space-between;
        padding-block: calc-rem(20px);
        cursor: pointer;
        transition: all .1s ease;

        @include media-breakpoint-up(lg) {
            padding-block: calc-rem(20px);
        }

        .faq-title {
            text-transform: none;
            display: flex;
            align-items: center;
            transition: color .3s ease;
            font-size: clamp-font(12px, 14px);
            margin-bottom: 0;
            font-variation-settings: var(--font-variation-settings-medium);

            @include media-breakpoint-up(lg) {
                padding-right: calc-rem(50px);
            }

        }

        .icon {
            width: calc-rem(11px);
            height: calc-rem(11px);
            flex: none;
            transition: .3s ease;
            margin-top: calc-rem(7px);
            margin-right: calc-rem(5px);

            @include media-breakpoint-up(lg) {
                width: calc-rem(10px);
                height: calc-rem(10px);
                margin-top: calc-rem(10px);
                margin-right: calc-rem(10px);
            }
        }
    }

    .faq-answer {
        pointer-events: none;
        max-height: 0;
        transition: all .3s ease;
        opacity: 0;
        font-size: clamp-font(12px, 12px);

        a:not(.btn) {
            text-decoration: underline;
            transition: .2s ease;
            color: rgba(var(--color-primary));

            &:hover {
                color: rgba(var(--color-secondary));
            }
        }

    }

    &.active {
        .faq-question {
            .icon {
                rotate: 180deg;

            }
        }

        .faq-answer {
            opacity: .9;
            pointer-events: auto;
            max-height: 2000px;
            padding-bottom: calc-rem(36px);


            @include media-breakpoint-up(lg) {
                padding-bottom: calc-rem(36px);
            }
        }
    }

}
