@layer components{.toggle{--toggle-thumb-size: 20px;--toggle-track-width: calc(var(--toggle-thumb-size) * 2);--toggle-track-height: var(--toggle-thumb-size);--toggle-gap: var(--space-unit-1);--toggle-thumb-offset: 2px;--toggle-bg-off: var(--default-200);--toggle-thumb-color: var(--color-paper);--toggle-border-color: var(--border-1);--toggle-bg-on: var(--success-500);--toggle-thumb-color-on: var(--color-paper);--toggle-bg-hover: color-mix(in srgb, var(--toggle-bg-on) 50%, transparent);--toggle-glass-bg: rgba(255, 255, 255, 0.72);--toggle-glass-blur: 10px;--toggle-glass-before: linear-gradient(
      92.62deg,
      var(--color-paper) -2.03%,
      var(--success-50) 50.64%,
      var(--color-paper) 101.32%
    );--toggle-elev: var(--elev-0);--toggle-elev-hover: var(--elev-1);--toggle-thumb-elev: var(--elev-1);--toggle-thumb-elev-hover: var(--elev-2);position:relative;display:inline-flex;align-items:center;gap:var(--toggle-gap);cursor:pointer;user-select:none;-webkit-user-select:none;font-family:var(--font-family-body);font-size:var(--font-size-body-m, 14px);font-weight:400;line-height:1.5;color:var(--text);transition:color var(--motion-duration-quick) var(--motion-ease-soft-out)}.toggle__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.toggle__track{position:relative;display:inline-flex;align-items:center;width:var(--toggle-track-width);height:var(--toggle-track-height);min-width:var(--toggle-track-width);min-height:var(--toggle-track-height);border-radius:var(--radius-pill);background:var(--toggle-bg-off);border:1px solid var(--toggle-border-color);box-shadow:var(--toggle-elev);transition:background var(--motion-duration-moderate) var(--motion-ease-soft-in-out),border-color var(--motion-duration-swift) var(--motion-ease-soft-out),box-shadow var(--motion-duration-moderate) var(--motion-ease-elevate);cursor:pointer}.toggle__thumb{position:absolute;left:var(--toggle-thumb-offset);top:50%;width:calc(var(--toggle-thumb-size) - var(--toggle-thumb-offset) * 2);height:calc(var(--toggle-thumb-size) - var(--toggle-thumb-offset) * 2);border-radius:var(--radius-circle);background:var(--toggle-thumb-color);box-shadow:var(--toggle-thumb-elev);transition:transform var(--motion-duration-moderate) var(--motion-ease-soft-in-out),background var(--motion-duration-swift) var(--motion-ease-soft-out),box-shadow var(--motion-duration-moderate) var(--motion-ease-elevate);will-change:transform;transform:translateY(-50%)}.toggle__label{cursor:pointer;color:inherit}.toggle--glass .toggle__track{border:0;background:var(--toggle-glass-bg);backdrop-filter:blur(var(--toggle-glass-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--toggle-glass-blur)) saturate(120%);box-shadow:var(--toggle-elev);background-clip:padding-box;-webkit-background-clip:padding-box;background:var(--toggle-bg-off);transition:transform var(--motion-button-hover-duration) var(--motion-button-hover-easing),background var(--motion-button-hover-duration) var(--motion-button-hover-easing),box-shadow var(--motion-button-hover-duration) var(--motion-button-hover-easing)}@supports (-webkit-mask: none) or (mask-composite: exclude){.toggle--glass .toggle__track{border-color:transparent}.toggle--glass .toggle__track::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--toggle-glass-before);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:1;opacity:0.8;transition:opacity var(--motion-duration-swift) var(--motion-ease-soft-out)}}.toggle--glass:hover .toggle__track:hover{background:var(--glass-bg, rgba(255,255,255,0.72));backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);background-clip:padding-box;-webkit-background-clip:padding-box;background:var(--toggle-bg-hover);border-color:transparent;transform:translateY(calc(-1 * var(--motion-translate-micro))) var(--motion-scale-hover);box-shadow:var(--toggle-elev-hover);transition:border-color var(--motion-duration-swift) var(--motion-ease-soft-out),background var(--motion-button-hover-duration) var(--motion-button-hover-easing),transform var(--motion-button-hover-duration) var(--motion-button-hover-easing),box-shadow var(--motion-button-hover-duration) var(--motion-button-hover-easing),backdrop-filter var(--motion-button-hover-duration) var(--motion-button-hover-easing),-webkit-backdrop-filter var(--motion-button-hover-duration) var(--motion-button-hover-easing)}.toggle--glass:hover .toggle__track:hover::before{opacity:1}.toggle--glass:hover .toggle__track:active{transform:var(--motion-scale-press);transition-duration:var(--motion-button-press-duration);transition-timing-function:var(--motion-button-press-easing)}.toggle--glass:hover .toggle__track::before{opacity:1}.toggle--glass:focus-visible .toggle__track{outline:2px solid color-mix(in oklab, white 35%, var(--color-primary));outline-offset:var(--space-unit-0_5);transition-duration:var(--motion-duration-swift)}.toggle--flat .toggle__track{background:var(--toggle-bg-off);border:1px solid var(--toggle-border-color);box-shadow:none}.toggle--flat:hover .toggle__track{box-shadow:var(--toggle-elev-hover)}.toggle__input:checked~.toggle__track,.toggle--checked .toggle__track{background:var(--toggle-bg-on);border-color:var(--toggle-bg-on)}.toggle__input:checked~.toggle__track .toggle__thumb,.toggle--checked .toggle__track .toggle__thumb{transform:translate(calc(var(--toggle-thumb-size)), -50%);background:var(--toggle-thumb-color-on)}.toggle__input:disabled~.toggle__track,.toggle--disabled .toggle__track,.toggle[aria-disabled="true"] .toggle__track{opacity:0.6;cursor:not-allowed;pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}.toggle__input:disabled~.toggle__label,.toggle--disabled .toggle__label,.toggle[aria-disabled="true"] .toggle__label{color:var(--text-disabled);cursor:not-allowed}.toggle__input:focus-visible~.toggle__track{outline:2px solid color-mix(in oklab, white 35%, var(--color-primary));outline-offset:var(--space-unit-0_5);transition-duration:var(--motion-duration-swift)}.toggle:hover:not(.toggle--disabled):not([aria-disabled="true"]) .toggle__track .toggle__thumb{box-shadow:var(--toggle-thumb-elev-hover)}.toggle--xs{--toggle-thumb-size: 12px;--toggle-gap: var(--space-unit-1);font-size:var(--font-size-caption, 12px)}.toggle--sm{--toggle-thumb-size: 16px;--toggle-gap: var(--space-unit-1_5);font-size:var(--font-size-body-s, 12px)}.toggle--md{--toggle-thumb-size: 20px;--toggle-gap: var(--space-unit-2);font-size:var(--font-size-body-m, 14px)}.toggle--lg{--toggle-thumb-size: 24px;--toggle-gap: var(--space-unit-2_5);font-size:var(--font-size-body-m, 14px)}.toggle--xl{--toggle-thumb-size: 28px;--toggle-gap: var(--space-unit-3);font-size:var(--font-size-body-l, 16px)}.toggle--primary{--toggle-bg-on: var(--primary-500);--toggle-glass-before: linear-gradient(
      92.62deg,
      var(--color-paper) -2.03%,
      var(--primary-50) 50.64%,
      var(--color-paper) 101.32%
    );--toggle-elev-hover: var(--elev-1-primary)}.toggle--secondary{--toggle-bg-on: var(--secondary-600);--toggle-glass-before: linear-gradient(92.62deg, var(--color-paper) -2.03%, var(--secondary-50) 50.64%, var(--color-paper) 101.32%);--toggle-elev-hover: var(--elev-1-secondary)}.toggle--success{--toggle-bg-on: var(--success-500);--toggle-glass-before: linear-gradient(276.46deg, var(--color-paper) 9.95%, var(--success-200) 52.2%, var(--success-50) 106.67%);--toggle-elev-hover: var(--elev-1-success)}.toggle--warning{--toggle-bg-on: var(--warning-500);--toggle-glass-before: linear-gradient(
      92.62deg,
      var(--color-paper) -2.03%,
      var(--warning-50) 50.64%,
      var(--color-paper) 101.32%
    );--toggle-elev-hover: var(--elev-1-warning)}.toggle--danger{--toggle-bg-on: var(--danger-500);--toggle-glass-before: linear-gradient(83.72deg, var(--color-paper) 0%, var(--danger-100) 59.74%, var(--color-paper) 98.97%);--toggle-elev-hover: var(--elev-1-danger)}.toggle--neutral{--toggle-bg-on: var(--default-400);--toggle-glass-before: linear-gradient(86.76deg, var(--color-paper) 2.54%, var(--tertiary-100) 50.39%, var(--color-paper) 97.32%);--toggle-elev-hover: var(--elev-1)}@media (prefers-reduced-motion: reduce){.toggle,.toggle__track,.toggle__thumb,.toggle__track::before{transition-duration:10ms !important;animation:none !important}}@media (prefers-contrast: high){.toggle__track{border-width:2px}}}
