.eControls .eSwitch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: var(--eSwitchDirection, row);

    & .k-switch {
        position:relative;
        display:inline-block;
        width:38px;                
        height:20px;
        vertical-align:middle;
        cursor:pointer;
        outline:none;
        line-height:20px;        
    }

    & .k-switch-sm.k-switch-on .k-switch-thumb-wrap {
        left: calc(100% - 7px);
    }

    & .k-switch .k-switch-handle {
        display: none !important;
    }

    & .k-switch .k-switch-track {
        position:absolute;
        inset:0;                             
        width:100%; 
        height:100%;
        border-radius:10px;
        background: var(--gray-300);
        transition:background .2s ease;
        overflow:hidden;
    }

    & .k-switch .k-switch-thumb {
        position:absolute;
        width:16px; 
        height:16px;
        left: -3px;          
        border-radius:50%;
        background:#fff;
        box-shadow:0 0 2px rgba(0,0,0,.3);
        transition:transform .2s ease;
    }

    & .k-switch.k-switch-on .k-switch-track { 
        background:var(--brand-600); 
        border: none !important;
    }

    & .k-switch.k-switch-off .k-switch-track {
        border: none !important;
    }

    & .k-switch.k-focus .k-switch-track{
        box-shadow:0 0 0 2px rgba(139,92,246,.6);
    }

    & .k-switch:focus-visible { 
        outline:none; 
    }

    & .k-switch.k-focus,
    & .k-switch .k-switch-thumb:focus {
        box-shadow:none;
        border-color:transparent;
    }

    & .k-switch.k-disabled,
    & .k-switch input[disabled] + .k-switch-track{
        opacity:.45; 
        cursor:not-allowed;
    }

    & .k-switch + label{
        margin-left:8px;
        cursor:pointer;
        user-select:none;
    }

    & label[for] { 
        cursor:pointer; 
        user-select:none; 
    }

    & .k-switch-on.k-focus .k-switch-track, 
    & .k-switch-on:focus .k-switch-track,
    & .k-switch-off.k-focus .k-switch-track, 
    & .k-switch-off:focus .k-switch-track {
        outline: none !important;
    }

    & .k-switch-label-on,
    & .k-switch-label-off {
        display: none !important;
    }
}


.eControls .eSwitch.smoll {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: var(--eSwitchDirection, row);
    gap: 4px;

    & .k-switch {
        position:relative;
        display:inline-block;
        width:24px;                
        height:16px;
        vertical-align:middle;
        cursor:pointer;
        outline:none;
        line-height:16px;        
    }

    & .k-switch.k-switch-on .k-switch-thumb {
        width: 12px;
        height: 12px;
        left: 0px;
    }

    & .k-switch.k-switch-off .k-switch-thumb {
        width: 12px;
        height: 12px;
        left: -6px;
    }
}