@use '../utils' as *;

/*----------------------------------------*/
/*  2.3 accordion
/*----------------------------------------*/

// new style

.rs-accordion{
    &-one{
        .rs-accordion-item{
            border:1px solid rgba(21, 42, 64, 0.05);
            border-radius: 4px 4px 4px 4px;
            background-color: var(--rs-bg-primary);
            &.active{
                border-color: var(--rs-theme-orange);
            }
            &:not(:last-child){
                margin-bottom: 20px;
            }
        }
        .accordion-button{
            font-size: 20px;
            font-weight: 600;
            background-color: transparent;
            padding: 0;
            box-shadow: none;
            padding-right: 50px;
            color: var(--rs-title-primary);
            padding: 18px 60px 18px 20px;
            @media #{$lg}{
                font-size: 18px;
            }
            &::after{
                content: none;
            }
            &:focus{
                border: none ;
            }
            &:not(.collapsed) {
                box-shadow: none;
                color: var(--rs-theme-orange);
                .accordion-btn{
                    &::before{
                        transform: translateX(-50%) rotate(90deg);
                        
                    }
                    &::after{
                        background: var(--rs-theme-orange);
                    }
                }
            }
            .accordion-btn{
                position: absolute;
                top: 50%;
                right: 20px;
                display: inline-block;
                width: 14px;
                height: 14px;
                transform: translateY(-50%);
                &::before{
                    position: absolute;
                    content: "";
                    width: 2px;
                    height: 100%;
                    left: 50%;
                    top: 0;
                    background-color: var(--rs-black);
                    transform: translateX(-50%);
                    border-radius: 2px;
                    transition: all 0.3s ease-out 0s;
                }
                &::after{
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: var(--rs-black);
                    border-radius: 2px;
                }
                &:focus{
                    z-index: 3;
                    outline: 0;
                    box-shadow: none;
                }
            }
            .accordion-icon{
                margin-inline-end: 20px;
                svg{
                    width: 40px;
                    height: 40px;
                    path{
                        fill: var(--rs-theme-primary) !important;
                    }
                }
            }
        }
        .accordion-body{
            padding: 0;
            color: var(--rs-text-primary);
            padding: 20px 50px 20px 20px;
            border-top: 1px solid rgba(31, 31, 31, 0.1);
        }
        &.has-theme-red{
            .rs-accordion-item{
                background-color: #191A1A;
                border:1px solid #FFFFFF33;
                &.active{
                    border-color: var(--rs-theme-red);
                }
            }
            .accordion-button{
                color: var(--rs-white);
                border-bottom: 1px solid transparent;
                &:not(.collapsed) {
                    color: var(--rs-theme-red);
                    border-color: rgba(255, 255, 255, 0.14);
                    .accordion-btn{
                        &::after{
                            background: var(--rs-theme-red);
                        }
                    }
                }
                .accordion-btn{
                    &::before,
                    &::after{
                        background: var(--rs-white);
                    }
                }
            }
            .accordion-body{
                color: #E6E6E6;
                border-top: 1px solid transparent;
            }
        }
        &.has-theme-orange{
            .rs-accordion-item{
                background-color: #191A1A;
                border:1px solid #FFFFFF33;
                &.active{
                    border-color: var(--rs-theme-orange);
                }
            }
            .accordion-button{
                color: var(--rs-white);
                border-bottom: 1px solid transparent;
                &:not(.collapsed) {
                    color: var(--rs-theme-orange);
                    border-color: rgba(255, 255, 255, 0.14);
                    .accordion-btn{
                        &::after{
                            background: var(--rs-theme-orange);
                        }
                    }
                }
                .accordion-btn{
                    &::before,
                    &::after{
                        background: var(--rs-white);
                    }
                }
            }
            .accordion-body{
                color: #E6E6E6;
                border-top: 1px solid transparent;
            }
        }
        &.has-theme-blue{
            .rs-accordion-item{
                background-color:var(--rs-bg-primary);
                border: 1px solid transparent;
            }
            .accordion-button{
                color: var(--rs-black);
                padding: 20px 50px 20px 30px;
                @media #{$xs}{
                    padding: 20px 30px 20px 30px;
                }
                &:not(.collapsed) {
                    color: var(--rs-theme-blue);
                    .accordion-btn{
                        &::after{
                            background: var(--rs-theme-blue);
                        }
                    }
                }
                .accordion-btn{
                    &::before,
                    &::after{
                        background: var(--rs-black);
                    }
                }
            }
            .accordion-body{
                padding: 20px 50px 20px 30px;
                @media #{$xs}{
                    padding: 20px 30px 20px 30px;
                }
            }
        }
        &.has-theme-green{
            .accordion-button{
                &:not(.collapsed) {
                    color: var(--rs-theme-green);
                    .accordion-btn{
                        &::after{
                            background: var(--rs-theme-green);
                        }
                    }
                }
            }
        }
        &.has-white{
            .accordion-button{
                background: var(--rs-white);
            }
            .accordion-body{
                background: var(--rs-white);
            }
        }
    }
    &-two{
        margin-inline-end: 70px;
        @media #{$laptop}{
            margin-inline-end: 0px;
        }
        .accordion-button {
            background-color: transparent;
            padding: 0;
            box-shadow: none;
            padding-inline-end: 50px;
            .accordion-title{
                font-size: 24px;
                font-weight: 600;
                background-color: transparent;
                color: var(--rs-title-primary);
                display: inline-flex;
                @media #{$xl} {
                    font-size: 22px;
                }
                @media #{$xs} {
                    font-size: 20px;
                }
            }
            &::after {
                content: none;
            }
            &:not(.collapsed) {
                box-shadow: none;
                .accordion-title{
                    background-size: 100% 2px;
                }
                .accordion-icon{
                        background: var(--rs-theme-medium-yellow);
                }
                .accordion-icon{
                    svg{
                        transform: rotate(90deg);
                    }
                }
            }
        }
        .accordion-icon{
            position: absolute;
            inset-inline-end: 0px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            text-align: center;
            transition: all 0.4s ease-out 0s;
            svg{
                width: 16px;
                    path{
                        fill: var(--rs-theme-secondary);
                        transition: all 0.4s ease-out 0s;
                    }
            }
        }
        .accordion-item{
            padding: 16px 0px 16px 0px;
            border: 0;
            border-bottom: 1px solid #ebebeb;
            position: relative;
            border-radius: 0;
            background: transparent;
            &:first-child{
                border-top: 1px solid #ebebeb;
            }
        }
        .accordion-body{
            color: var(--rs-text-primary);
            padding: 20px 50px 0 0px;
            line-height: 28px;
            @media #{$sm}{
                padding: 20px 0px 0 0px;
            }
        } 
    }
}
