.c-switch{--switch-background-color:transparent;--switch-thumb-color:var(--color-secondary);--switch-width:3.125rem;--switch-height:1.75rem;--switch-thumb-size:1.5rem;background-color:var(--switch-background-color);border:1px solid var(--switch-thumb-color);border-radius:999em;cursor:pointer;height:var(--switch-height);position:relative;transition:filter .2s;width:var(--switch-width)}.c-switch:not([data-disabled]):hover{filter:brightness(.95)}.c-switch[data-disabled]{--switch-thumb-color:var(--color-tertiary);--switch-background-color:var(--color-quinary);border-color:var(--switch-background-color);cursor:not-allowed}.c-switch[data-state=checked]{--switch-thumb-color:var(--color-primary)}.c-switch__container{align-items:center;display:flex;gap:var(--space-scale-2xs)}.c-switch__thumb{background-color:var(--switch-thumb-color);border-radius:999em;display:block;height:var(--switch-thumb-size);transform:translate(1px);transition:transform .2s;width:var(--switch-thumb-size);will-change:transform}.c-switch__thumb[data-state=checked]{transform:translate(calc(var(--switch-width) - var(--switch-thumb-size) - 3px))}.c-switch__thumb[data-state=checked][data-disabled]{background-color:var(--color-neutral-600)}.c-switch--secondary .c-switch__thumb{color:var(--color-tertiary);display:grid;place-items:center}.c-switch--secondary .c-switch__thumb-icon{font-size:var(--font-scale-m);height:1em;opacity:0;transition:opacity .2s,visibility .2s;visibility:hidden;width:1em}.c-switch--secondary[data-state=checked] .c-switch__thumb-icon{opacity:1;visibility:visible}.c-switch--error{background-color:var(--color-error-20);border-color:var(--color-error)}.c-switch--error .c-switch__thumb{background-color:var(--color-error)}.c-switch--error-message{color:var(--color-error)}.c-switch--small{--switch-width:2.125rem;--switch-height:1rem;--switch-thumb-size:.75rem}.c-switch--medium{--switch-width:2.125rem;--switch-height:1.25rem;--switch-thumb-size:1rem}.c-switch-group{align-items:center;display:flex;gap:var(--space-scale-2xs)}.c-switch-group>svg{font-size:var(--font-scale-m);height:1em;transition:color .2s;width:1em}.c-switch-group .c-switch__container[data-state=true]+svg{color:var(--color-primary)}