.u-base-switch{--u-base-switch-width:var(--u-spacing-9);--u-base-switch-border-width:1px;--u-base-switch-gap:var(--u-spacing-1);--u-base-switch-handle-size:18px;--u-base-switch-offset:calc((var(--u-base-switch-gap) * 2) + (var(--u-base-switch-border-width) * 2));--u-base-switch-thumb-translate-x:calc(var(--u-base-switch-width) - var(--u-base-switch-handle-size) - var(--u-base-switch-offset));width:var(--u-base-switch-width);height:var(--u-spacing-6);padding:var(--u-base-switch-gap);cursor:pointer;background-color:var(--theme-background-base);border:var(--u-base-switch-border-width) solid var(--theme-color-greyscale-100);border-radius:var(--u-spacing-3);box-shadow:none;transition:background-color var(--u-fluid-transition), border-color var(--u-fluid-transition);flex-shrink:0;align-items:center;display:inline-flex;position:relative}.u-base-switch:focus-visible{outline:var(--u-focus-ring-color,var(--theme-focus-ring-color,var(--theme-color-primary-500))) solid var(--theme-focus-ring-width,2px);outline-offset:var(--theme-focus-ring-offset,3px)}.u-base-switch:hover{background-color:var(--theme-background-base);border-color:var(--theme-color-blacks-200)}.u-base-switch:hover .u-base-switch__thumb{background-color:var(--theme-color-primary-500)}.u-base-switch[data-state=checked]{background-color:var(--theme-color-primary-500);border-color:var(--theme-color-primary-700)}.u-base-switch[data-state=checked] .u-base-switch__thumb{background-color:var(--theme-background-base);transform:translateX(var(--u-base-switch-thumb-translate-x))}.u-base-switch[data-state=checked]:hover{background-color:var(--theme-color-primary-700);border-color:var(--theme-color-primary-700)}.u-base-switch[data-state=checked]:hover .u-base-switch__thumb{background-color:var(--theme-background-base)}.u-base-switch[data-disabled]{cursor:default;background-color:var(--theme-background-secondary-200);border-color:var(--theme-color-greyscale-100)}.u-base-switch[data-disabled] .u-base-switch__thumb{background-color:var(--theme-color-blacks-200)}.u-base-switch[data-disabled][data-state=checked]{background-color:var(--theme-color-greyscale-200);border-color:var(--theme-color-greyscale-200)}.u-base-switch__thumb{width:var(--u-base-switch-handle-size);height:var(--u-base-switch-handle-size);background-color:var(--theme-color-primary-500);transition:transform var(--u-fluid-transition), background-color var(--u-fluid-transition);will-change:transform;border-radius:50%;transform:translate(0)}