/**
    Advanced Toggle Switcher
*/

.wdt-advanced-toggle-switcher-container { display: flex; align-items: center; justify-content: center; margin: 0 0 clamp(1.875rem, 1.457rem + 1.9108vw, 3.75rem); /* Min-30 & Max-60 */  }

.wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle { margin: 0 clamp(0.75rem, 0.5549rem + 0.8917vw, 1.625rem);/* Min-12 & Max-26 */ -webkit-appearance: none; appearance: none; 
    background: rgba(var(--wdtBorderColorRgb),0.3); cursor: pointer; width: 80px; height: 30px; display: block; 
    border-radius: 100px; position: relative; padding-left: 0; padding-right: 30px; }

/* .wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:after { content: ''; position: absolute; pointer-events: none;
    top: 0; left: 0; width: 50px; height: 30px; color: var(--wdtQuaternaryColor); border-radius: 60px; 
    transition: var(--wdt-Ad-Transition); background-color: currentColor; } */
.wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:after { content: ''; position: relative; pointer-events: none; top: 0; left: 0; 
    width: 100%; height: 100%; max-width: 50px; color: var(--wdtQuaternaryColor); border-radius: 60px; transition: var(--wdtAltTransition); 
    background-color: currentColor; z-index: 1; display: flex; margin-left: 0; margin-right: auto; transition-property: all, margin; }

/* .wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:checked:after { left: calc(100% - 0px); transform: translateX(-100%); } */
.wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:checked { padding-left: 30px; padding-right: 0; }
.wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:active:after { width: 60%; }


.wdt-advanced-toggle-container .wdt-advanced-toggle-switcher-container .wdt-advanced-toggle-title { 
    font-size: 18px; color: var(--wdtHeadAltColor); margin: 0px; }

/** 
    RTL Support
*/

body.rtl .wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:after { left: calc(100% - 5px); transform: translateX(-100%); }
body.rtl .wdt-advanced-toggle-switcher-container .wdt-advanced-checkbox-toggle:checked:after { left: 5px; transform: translateX(0); }