@layer base{
    .checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: #202830;
        padding: 2px;
        position: relative;
        transition: 0.5s ease-in-out;
        
       
    }
    
    
    
    
    .checkbox input[type='checkbox'] {
        cursor: pointer;
        opacity: 0;
        position: absolute;
        width: inherit;
        height: inherit;
        display: none;
        
    }
    
    .checkbox.active i{ color: #FFF500 ;}

    .checkbox label{
        position: absolute;
        user-select: none;
        cursor: pointer;
        
    }
    .checkbox label[data-dir='right']{
        right:0;
        transform: translate(calc(100% + 5px),0);
    }

    .checkbox label[data-dir='left']{
        left:0;
        transform: translate(calc(-100% - 5px),0);
    }
    .checkbox.v2{justify-content:flex-start;}
    .checkbox.v2:not(.active){background-color: lightgray !important;}
   

    .checkbox .swipe-bal{transition: 0.3s ease-in-out;left:0px;margin:0;flex-grow: 0;}

    
}