@use '../utils' as *;

/*----------------------------------------*/
/*  2.12 Accordion
/*----------------------------------------*/

.#{$theme-prifix}-accordion{
    
    & .accordion-item{
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid rgba($color: var(--tp-common-black), $alpha: 1);
        &:first-of-type{
            & .accordion-button{
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }
        &:last-of-type{
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;

            & .accordion-button{
                &.collapsed{
                    border-bottom-right-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
        }
    }

    & .accordion-button {
        padding: 30px 0;
        padding-right: 15px;
        font-size: 24px;
        font-weight: 500;
        color: var(--tp-common-black);
        background-color: transparent;

        &::after{
            position: absolute;
            content: '\f106';
            font-family: var(--tp-ff-fontawesome);
            background-image: none;
            top: 28%;
            right: 0;
            @include transform(rotate(180deg));
            color: var(--tp-theme-primary);
            width: auto;
            height: auto;
            font-weight: 500;
            background: none;
        }


        &.has-plus-icon{
            &::after{
                display: none;
            }
        }

        /* plus icon css */
        & .#{$theme-prifix}-accordion-plus{
            position: absolute;
            top: 50%;
            right: 0;
            @include transform(translateY(-50%));
            display: inline-block;
            width: 14px;
            height: 14px;
            @extend %tp-transition-common;

            @include rtl{
                right: auto;
                left: 0;
            }

            &::after{
                position: absolute;
                content: '';
                width: 100%;
                height: 2px;
                left: 0;
                top: 50%;
                @include transform(translateY(-50%));
                background-color: #525258;
                border-radius: 2px;
                @extend %tp-transition-common;

                @include rtl{
                    right: 0;
                    left: auto;
                }
            }
            &::before{
                position: absolute;
                content: "";
                width: 2px;
                height: 100%;
                left: 50%;
                top: 0;
                background-color: #525258;
                @include transform(translateX(-50%));
                border-radius: 2px;
                @extend %tp-transition-common;

                @include rtl{
                    right: 50%;
                    left: auto;
                    @include transform(translateX(50%));
                }
            }
        }

        &.collapsed{ 
            &::after{
                @include transform(rotate(0deg));
                color:  var(--tp-common-black);
            }
        }

        &:not(.collapsed){
            color: var(--tp-theme-primary);
            background-color: transparent;
            box-shadow: none;

            & .#{$theme-prifix}-accordion-plus{
                &::before{
                    @include transform(translateX(-50%) rotate(90deg));
                    background-color: var(--tp-theme-1);

                    @include rtl{
                        @include transform(translateX(50%) rotate(90deg));
                    }
                }
                &::after{
                    background-color: var(--tp-theme-1);
                }
            }
        }

        &:focus{
            box-shadow: none;
            border: 0;
        }

        &:hover{
            color: var(--tp-theme-primary);
            &::after{
                color: var(--tp-theme-primary);
            }
        }
        
    }

    & .accordion-body{
        padding: 0 0 25px;
        & p{
            font-size: 16px;
            color: var(--tp-text-1);
        }
    }
}