@scope([data-example]){[data-slot=switch]{box-sizing:border-box;background:var(--surface-1);width:38px;height:22px;box-shadow:inset 0 0 0 1px var(--line);cursor:default;transition:background-color var(--duration), box-shadow var(--duration);border:0;border-radius:999px;flex-shrink:0;align-items:center;padding:3px;display:inline-flex}[data-slot=switch]:hover:not([data-disabled],[data-readonly],[data-checked]){box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, var(--surface-1))}[data-slot=switch][data-checked]{background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}[data-slot=switch]:is([data-invalid],[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--danger)}[data-slot=switch][data-readonly]:not([data-checked]){background:var(--tint)}[data-slot=switch][data-disabled]{box-shadow:inset 0 0 0 1px var(--line-faint)}[data-slot=switch][data-disabled][data-checked]{background:var(--line-disabled);box-shadow:inset 0 0 0 1px var(--line-disabled)}[data-slot=switch][data-size=sm]{width:30px;height:18px}[data-slot=switch-thumb]{box-sizing:border-box;width:var(--size-icon);height:var(--size-icon);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px color-mix(in oklab, var(--ink) 10%, transparent);color:var(--muted);transition:translate var(--duration);border-radius:50%;place-items:center;display:grid}[data-slot=switch-thumb]>svg{stroke-width:2.5px;width:10px;height:10px}[data-slot=switch-thumb][data-checked]{background:var(--paper);box-shadow:var(--shadow-drop);translate:16px}[data-slot=switch-thumb][data-checked]:is([dir=rtl],[dir=rtl] *){translate:-16px}[data-disabled]>[data-slot=switch-thumb]{box-shadow:inset 0 0 0 1px var(--line-faint)}[data-size=sm]>[data-slot=switch-thumb]{width:12px;height:12px}[data-size=sm]>[data-slot=switch-thumb][data-checked]{translate:12px}[data-size=sm]>[data-slot=switch-thumb][data-checked]:is([dir=rtl],[dir=rtl] *){translate:-12px}:is([data-slot=label],[data-slot=field]):has([data-slot=switch][data-disabled]){color:var(--line-disabled)}:scope[data-example^=switch\/] :is([data-slot=label],[data-slot=field],[data-slot=row]):has(>[data-slot=switch]){justify-content:space-between;gap:var(--space-4);box-sizing:border-box;flex-wrap:nowrap;width:20rem;max-width:100%}:scope[data-example^=switch\/]:not([data-example=switch\/form]) :is([data-slot=label],[data-slot=field],[data-slot=row]):has(>[data-slot=switch]):not(:has(>[data-slot=stack],>[data-slot=field-description])){width:14rem}:scope[data-example^=switch\/] [data-slot=stack]:has(>[data-slot=label]>[data-slot=switch]){max-width:100%}:scope[data-example^=switch\/] :is([data-slot=field],[data-slot=row])>[data-slot=stack]:has(+[data-slot=switch]){gap:var(--space-1);flex:1}:scope[data-example^=switch\/] :is([data-slot=field],[data-slot=row]):has(>[data-slot=stack]+[data-slot=switch]){align-items:flex-start}:scope[data-example=switch\/invalid] [data-slot=field]:not(:has(>[data-slot=field-error])):after{content:" ";font-size:var(--text-sm)}:scope[data-example=switch\/form] form{gap:var(--space-6)}[data-slot=field-set]>[data-slot=label]:has(>[data-slot=switch]){font-weight:400}:scope[data-example=switch\/choice-card] [data-variant=card]{position:relative}:scope[data-example=switch\/choice-card] [data-variant=card] [data-slot=field-label]:after{content:"";border-radius:inherit;position:absolute;inset:0}:scope[data-example=switch\/choice-card] [data-variant=card]>[data-slot=switch]{position:relative}:scope[data-example=switch\/choice-card] [data-variant=card]:hover:not(:has([data-checked])){box-shadow:0 0 0 1px color-mix(in oklab, var(--ink) 45%, var(--surface-1))}}