@use '../utils' as *;

/*----------------------------------------*/
/*  2.7 Carousel
/*----------------------------------------*/

/* tp range slider css */
.tp-range-slider{

    & .inside-slider{
        padding-left: 7px;
        padding-right: 17px;
    }
    & .noUi-target{
        background-color: #191C3C;
        border-radius: 12px;
        border: 0;
        box-shadow: none;
    }

    & .noUi-connect{
        background-color: var(--tp-theme-primary);
    }

    & .noUi-horizontal{
        height: 6px;
    }
    & .noUi-handle{
        height: 24px;
        width: 24px;
        background-color: var(--tp-theme-primary);
        border-radius: 50%;
        border: 4px solid var(--tp-common-white);
        box-shadow: 0px 4px 10px rgba(5, 9, 43, 0.3);
        top: -9px;

        &:hover{
            cursor: pointer;
        }
        &::before,
        &::after{
            display: none;
        }
    }

    &-dark{
        

        & .noUi-handle{
            border: 4px solid #2D314B;
        }
    }
}


/* tp swiper slider dot */

.tp-swiper-dot{
    .swiper-pagination-bullet{
        width: 8px;
        height: 8px;
        background-color: var(--tp-grey-1);
        opacity: 1;
        margin: 0 9px;
        position: relative;

        &::after{
            position: absolute;
            content: '';
            left: 50%;
            top: 50%;
            width: calc(100% + 16px);
            height: calc(100% + 16px);
            background-color: transparent;
            border: 2px solid transparent;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
        }
        & button{
            font-size: 0;
        }
        
        &.swiper-pagination-bullet-active{
            background-color: var(--tp-theme-primary);

            &::after{
                border-color: var(--tp-theme-primary);
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
}

.tp-swiper-arrow{
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    text-align: center;
    background-color: var(--tp-common-white);
    color: var(--tp-common-black);
    &:hover{
        background-color: var(--tp-common-black);
        color: var(--tp-common-white);
    }
}


/* tp slick arrow */

.tp-slick-dot{
    
}