@layer reset;@layer tokens{:root{--f-switch--height:24px;--f-switch--width:40px;--f-switch--unchecked-bg-color:var(--f-color-border-strong);--f-switch--checked-bg-color:var(--f-color-primary);--f-switch--disabled-bg-color:var(--f-color-surface-subtle);--f-switch--handle-bg-color:#fff;--f-switch--inner-text-color:var(--f-color-on-accent)}}@layer base;@layer components{.f-switch{--_f-switch--height:var(--f-switch--height);--_f-switch--width:var(--f-switch--width);--_f-switch--unchecked-bg-color:var(--f-switch--unchecked-bg-color);--_f-switch--checked-bg-color:var(--f-switch--checked-bg-color);--_f-switch--disabled-bg-color:var(--f-switch--disabled-bg-color);--_f-switch--bg-color:var(--_f-switch--unchecked-bg-color);--_f-switch--handle-size:calc(var(--_f-switch--height) - 4px);--_f-switch--handle-form-active-offset:0;--_f-switch--handle-bg-color:var(--f-switch--handle-bg-color);--_f-switch--inner-text-color:var(--f-switch--inner-text-color)}.f-switch:active:not(.f-switch--disabled):not(.f-switch--readonly){--_f-switch--handle-form-active-offset:4px}.f-switch{gap:var(--f-space-2);align-items:center;display:inline-flex}.f-switch__label{cursor:pointer}.f-switch>button{min-width:var(--_f-switch--width);height:var(--_f-switch--height);background-color:var(--_f-switch--bg-color);border-radius:calc(var(--_f-switch--height) / 2);border:none;outline:2px solid #0000;flex-flow:row;align-items:stretch;padding:0;transition:all .25s;display:flex;position:relative}.f-switch>button:focus-visible:not(:disabled){outline-color:color-mix(in srgb, var(--_f-switch--bg-color), transparent)}.f-switch>button:hover{cursor:pointer}.f-switch .f-switch__handle{width:var(--_f-switch--handle-size);height:var(--_f-switch--handle-size);background-color:var(--_f-switch--handle-bg-color);border-radius:calc(var(--_f-switch--handle-size) / 2);z-index:2;box-shadow:var(--f-shadow-1);justify-content:center;align-items:center;transition:all .4s;display:flex;position:absolute;top:2px;left:2px}.f-switch .f-switch__handle .f-spinner{--f-spinner--size:calc(var(--_f-switch--handle-size) - 2px);--f-spinner--color:var(--_f-switch--bg-color);z-index:1;position:relative}.f-switch .f-switch__handle:before{content:"";width:var(--_f-switch--handle-size);height:var(--_f-switch--handle-size);background-color:var(--_f-switch--handle-bg-color);z-index:1;transform:translateX(var(--_f-switch--handle-form-active-offset));border-radius:calc(var(--_f-switch--handle-size) / 2);transition:transform .5s;display:block;position:absolute}.f-switch--checked{--_f-switch--bg-color:var(--_f-switch--checked-bg-color)}.f-switch--checked:active:not(.f-switch--disabled):not(.f-switch--readonly){--_f-switch--handle-form-active-offset:-4px}.f-switch--checked>button .f-switch__handle{left:calc(100% - 3px - var(--_f-switch--handle-size))}.f-switch--checked .f-switch__inner .f-switch__checked-slot{opacity:1;transform:translate(0)}.f-switch--checked .f-switch__inner .f-switch__unchecked-slot{opacity:0;align-items:center;display:flex;transform:translate(105%)}.f-switch__inner{width:100%;color:var(--_f-switch--inner-text-color);align-items:center;display:flex;position:relative;overflow:hidden}.f-switch__inner .f-switch__checked-slot,.f-switch__inner .f-switch__unchecked-slot{gap:var(--f-space-1);justify-content:center;align-items:center;width:100%;font-size:11px;transition:all .25s;display:flex;position:absolute}.f-switch__inner .f-switch__checked-slot>svg,.f-switch__inner .f-switch__unchecked-slot>svg{width:16px;height:auto}.f-switch__inner .f-switch__content-mirror{visibility:hidden}.f-switch__inner .f-switch__content-mirror>*{height:1px;position:relative;overflow:hidden}.f-switch__inner .f-switch__checked-slot{opacity:0;padding:0 calc(var(--_f-switch--handle-size) + var(--f-space-2)) 0 var(--f-space-2);transform:translate(-105%)}.f-switch__inner .f-switch__unchecked-slot{opacity:1;padding:0 var(--f-space-2) 0 calc(var(--_f-switch--handle-size) + var(--f-space-2));transform:translate(0)}.f-switch--disabled{--_f-switch--bg-color:var(--_f-switch--disabled-bg-color);--_f-switch--handle-form-active-offset:0}.f-switch--disabled .f-switch__label{cursor:not-allowed}.f-switch--disabled>button{opacity:.6}.f-switch--disabled>button:hover{cursor:not-allowed}.f-switch--size-small{--_f-switch--height:18px;--_f-switch--width:32px}.f-switch--color-default{--_f-switch--unchecked-bg-color:var(--f-color-border-default);--_f-switch--checked-bg-color:var(--f-color-primary);--_f-switch--disabled-bg-color:var(--f-color-surface-subtle);--_f-switch--handle-bg-color:#fff;--_f-switch--inner-text-color:#fff}.f-switch--color-primary{--_f-switch--accent-color:var(--f-color-primary);--_f-switch--unchecked-bg-color:var(--f-color-border-default);--_f-switch--checked-bg-color:var(--_f-switch--accent-color);--_f-switch--disabled-bg-color:var(--f-color-surface-subtle);--_f-switch--handle-bg-color:#fff;--_f-switch--inner-text-color:var(--f-color-on-accent)}.f-switch--color-secondary{--_f-switch--accent-color:var(--f-color-secondary);--_f-switch--unchecked-bg-color:var(--f-color-border-default);--_f-switch--checked-bg-color:var(--_f-switch--accent-color);--_f-switch--disabled-bg-color:var(--f-color-surface-subtle);--_f-switch--handle-bg-color:#fff;--_f-switch--inner-text-color:var(--f-color-on-accent)}.f-switch--color-success{--_f-switch--accent-color:var(--f-color-success);--_f-switch--unchecked-bg-color:var(--f-color-border-default);--_f-switch--checked-bg-color:var(--_f-switch--accent-color);--_f-switch--disabled-bg-color:var(--f-color-surface-subtle);--_f-switch--handle-bg-color:#fff;--_f-switch--inner-text-color:var(--f-color-on-accent)}.f-switch--color-danger{--_f-switch--accent-color:var(--f-color-danger);--_f-switch--unchecked-bg-color:var(--f-color-border-default);--_f-switch--checked-bg-color:var(--_f-switch--accent-color);--_f-switch--disabled-bg-color:var(--f-color-surface-subtle);--_f-switch--handle-bg-color:#fff;--_f-switch--inner-text-color:var(--f-color-on-accent)}.f-switch--color-warning{--_f-switch--accent-color:var(--f-color-warning);--_f-switch--unchecked-bg-color:var(--f-color-border-default);--_f-switch--checked-bg-color:var(--_f-switch--accent-color);--_f-switch--disabled-bg-color:var(--f-color-surface-subtle);--_f-switch--handle-bg-color:#fff;--_f-switch--inner-text-color:var(--f-color-on-accent)}}@layer theme,utilities;
