@use "../abstracts/index" as *;
.accordion-item {
    .accordion-title {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        gap: 5px;
        &:not(.collapsed) {
            .icon {
                &::after {
                    opacity: 0;
                }
                &::before {
                    background-color: var(--Primary);
                    transform: translate(-50%, -50%) rotate(90deg);
                }
            }
            .title {
                color: var(--Primary);
            }
        }
    }
    .title {
        @include transition3();
    }
    .icon {
        height: 24px;
        width: 24px;
        position: relative;
        &::after {
            position: absolute;
            content: "";
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 1px;
            background-color: var(--Black);
            transition: 0.25s ease-in-out;
        }
        &::before {
            position: absolute;
            content: "";
            right: 17px;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 16px;
            background-color: var(--Black);
            transition: 0.25s ease-in-out;
        }
    }
    .accordion-faqs-content {
        padding-top: 20px;
    }
    &.style-default {
        padding: 38px 0 39px;
        position: relative;
        border-top: 1px solid var(--Mono-gray-3);
        .accordion-title,
        .accordion-faqs-content {
            position: relative;
            z-index: 2;
        }
        .accordion-title {
            &:not(.collapsed) {
                .icon {
                    &::before {
                        background-color: var(--Primary);
                    }
                }
                .title {
                    color: var(--Primary);
                }
            }
        }
        .heading {
            .title {
                display: flex;
                gap: 56px;
            }
            span {
                width: 33px;
            }
        }
        .accordion-faqs-content {
            padding-left: 89px;
            padding-top: 23px;
        }
        &.active {
            border-color: var(--Primary);
        }
        &.v2,
        &.v3,
        &.v4 {
            border-bottom: 1px solid var(--Mono-gray-3);
            border-top: unset;
            .accordion-faqs-content {
                padding-left: 0;
            }
            &.active {
                border-color: var(--Primary);
            }
        }
        &.v2 {
            padding: 33px 0 29px;
            .accordion-faqs-content {
                padding-top: 8px;
            }
        }
        &.v3 {
            padding: 35px 0 31px;
            border-block-end: 2px dashed var(--Mono-gray-3);
            p {
                max-width: 753px;
            }
            .accordion-faqs-content {
                padding-top: 11px;
            }
            &.active {
                border-color: var(--Primary);
            }
        }
        &.v4 {
            border: 1px solid var(--Mono-gray-2);
            border-radius: 12px;
            padding: 22px 24px 21px;
            .accordion-title {
                &:not(.collapsed) {
                    .icon {
                        &::before {
                            background-color: var(--Mono-gray-5);
                        }
                    }
                }
            }
            .accordion-faqs-content {
                padding-top: 15px;
            }
        }
        &.v5 {
            border-top-style: dashed;
            padding: 36px 0 40px;
            .list {
                padding-left: 10px;
                gap: 9px;
            }
            .accordion-faqs-content {
                padding-top: 23px;
            }
        }
        .list {
            display: grid;
            gap: 12px;
            li {
                position: relative;
                display: flex;
                gap: 10px;
                align-items: center;
                &::before {
                    position: relative;
                    content: "";
                    width: 6px;
                    height: 6px;
                    border-radius: 999px;
                    background-color: var(--Color-dark);
                    flex-shrink: 0;
                }
            }
        }
    }
    &.style-1 {
        background-color: var(--Mono-gray-1);
        padding: 22.5px 24px;
        .icon {
            &::after,
            &::before {
                background-color: #141b34;
            }
        }
        .accordion-faqs-content {
            padding-top: 13px;
        }
        .accordion-faqs-content {
            font-style: italic;
        }
        &.active {
            background-color: var(--Sub-color-2);
        }
    }
}