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

/*----------------------------------------*/
/*  4.4 Category css
/*----------------------------------------*/

.rs-category {
    &-one {
        position: relative;
        z-index: 1;
        .rs-category-bg-thumb{
            position: absolute;
            width: 100%;
            height: 100%;
            background-position: bottom center;
            background-repeat: no-repeat;
            z-index: -1;
        }
        .rs-category-item{
            background: var(--rs-white);
            padding: 25px 25px 40px;
            display: flex;
            gap: 15px 25px;
            position: relative;
            border-radius: 4px;
            @media #{$lg}{
                padding: 20px 20px 40px;
            }
            @media #{$mobile}{
                padding: 20px 20px 20px;
                flex-wrap: wrap;
            }
            &:hover{
                .rs-category-icon{
                    svg{
                        animation: rs-fold linear 0.3s;
                    }
                }
            }
            &::before{
                position: absolute;
                color: #E7E9EC;
                counter-increment: count;
                content: "0" counter(count);
                z-index: 1;
                font-size: 30px;
                font-weight: 700;
                bottom: 35px;
                inset-inline-start: 35px;
                line-height: 1;
                transform: rotate(-90deg);
                @media #{$mobile}{
                    bottom: unset;
                    top: 35px;
                    inset-inline-end: 35px;
                    transform: rotate(0deg);
                    inset-inline-start: auto;
                }
            }
        }
        .rs-category-icon {
            width: 60px;
            height: 60px;
            background: var(--rs-bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border-radius: 4px;
            svg {
                width: 40px;
                path{
                    fill: var(--rs-theme-red);
                }
            }
        }
        .rs-category-title{
            margin-bottom: 10px;
        }
        .rs-category-content{
            margin-top: 10px;
        }
        &.has-theme-orange{
            .rs-category-bg-thumb{
                background-position: top center;
                top: 0;
                inset-inline-start: 0;
                background-size: cover;
                @media #{$md}{
                    background-position: center left;
                }
            }
            .rs-section-title{
                color: var(--rs-white);
            }
            .rs-category-icon {
                svg {
                    width: 40px;
                    path{
                        fill: var(--rs-theme-orange);
                    }
                }
            }
        }
    }
}