@use '../../utils' as *;

/*----------------------------------------*/
/*  4.1 cetagory css
/*----------------------------------------*/


.al-category-shop{
    $self: &;
    &-slider{
        & .al-swiper-shop-scrollbar{
            width: calc(100% - 200px );
            margin: auto;
            @media #{$sm}{
                width: calc(100% - 100px );
            }
            @media #{$xs}{
                width: 100%;
            }
        }
    }
    &-item{
        &:hover{
            #{$self}{
                &-title,
                &-btn,
                &-content span,
                &-content::after{
                    @include transform(translateY(0));
                    visibility: visible;
                    opacity: 1;
                }
                &-title{
                    transition-delay: .5s;
                }
                &-btn{
                    transition-delay: .7s;
                }
                &-content span{
                    transition-delay: .3s;
                }
                &-content::after{
                    transition-delay: .1s;
                }
            }
        }
    }
    &-title,
    &-btn,
    &-content span,
    &-content::after{
        @include transform(translateY(10px));
        visibility: hidden;
        opacity: 0;
        @include transition();
    }
    &-content{
        position: absolute;
        top: 14px;
        left: 14px;
        bottom: 14px;
        right: 14px;
        background-color: transparent;
        @include flexbox();
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;        
        &::after{
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--tp-common-white);
            z-index: -1;
            @include transition();
            transition-delay: .7s;
            
        }
        & span{
            font-size: 16px;
            display: inline-block;
            margin-bottom: 3px;
            transition-delay: .5s;
            font-family: var(--tp-ff-dm);
        }
    }
    &-title{
        font-weight: 400;
        font-size: 20px;
        margin-bottom: 17px;
        transition-delay: .3s;
        font-family: var(--tp-ff-dm);
        & a{
            &:hover{
                color: var(--tp-theme-secondary);
            }
        }
    }
    &-btn{
        transition-delay: 0s;
        & .al-shop-btn-border{
            font-size: 14px;
            padding: 3px 15px;
            &:hover{
                background: var(--tp-theme-secondary);
                border-color: var(--tp-theme-secondary);
                color: var(--tp-common-white);
            }
        }
    }
    &-thumb{
        & img{
            @media #{$sm, $xs}{
                width: 100%;
            }
        }
    }
}

.al-swiper-shop-scrollbar{
    background-color: #EDEFF2;
    height: 2px!important;
    @include transition();
    position: relative!important;
    & .al-swiper-scrollbar-drag{
        background-color: var(--tp-common-black);
        height: 100%;
        &:hover{
            cursor: pointer;
        }
    }
}