.troupe-switch{box-sizing:border-box;align-items:center;gap:var(--troupe-space-inline-sm);color:var(--troupe-color-text-default);font-family:var(--troupe-font-family-body);font-weight:var(--troupe-font-weight-body);line-height:var(--troupe-font-line-height-body);cursor:pointer;display:inline-flex;position:relative}.troupe-switch__control{opacity:0;pointer-events:none;border:0;block-size:0;inline-size:0;margin:0;padding:0;position:absolute;overflow:hidden}.troupe-switch__track{box-sizing:border-box;border-style:solid;border-width:var(--troupe-border-width-default);border-color:var(--troupe-color-border-default);border-radius:var(--troupe-radius-control);background-color:var(--troupe-color-surface-subtle);transition-property:background-color,border-color;transition-duration:var(--troupe-motion-duration-state-change);transition-timing-function:var(--troupe-motion-easing-state-change);flex:none;align-items:center;display:inline-flex}.troupe-switch__thumb{border-radius:var(--troupe-radius-control);background-color:var(--troupe-color-border-strong);transition-property:background-color;transition-duration:var(--troupe-motion-duration-state-change);transition-timing-function:var(--troupe-motion-easing-state-change);flex:none;position:relative;inset-inline-start:0}.troupe-switch__label{font-size:inherit}.troupe-switch:where(:not([data-size]),[data-size=md]){font-size:var(--troupe-switch-font-size-md)}.troupe-switch:where(:not([data-size]),[data-size=md]) .troupe-switch__track{inline-size:var(--troupe-switch-track-width-md);block-size:var(--troupe-switch-track-height-md);padding-inline:calc((var(--troupe-switch-track-height-md) - var(--troupe-switch-thumb-size-md)) / 2 - var(--troupe-border-width-default))}.troupe-switch:where(:not([data-size]),[data-size=md]) .troupe-switch__thumb{inline-size:var(--troupe-switch-thumb-size-md);block-size:var(--troupe-switch-thumb-size-md)}.troupe-switch[data-size=sm]{font-size:var(--troupe-switch-font-size-sm)}.troupe-switch[data-size=sm] .troupe-switch__track{inline-size:var(--troupe-switch-track-width-sm);block-size:var(--troupe-switch-track-height-sm);padding-inline:calc((var(--troupe-switch-track-height-sm) - var(--troupe-switch-thumb-size-sm)) / 2 - var(--troupe-border-width-default))}.troupe-switch[data-size=sm] .troupe-switch__thumb{inline-size:var(--troupe-switch-thumb-size-sm);block-size:var(--troupe-switch-thumb-size-sm)}.troupe-switch[data-size=lg]{font-size:var(--troupe-switch-font-size-lg)}.troupe-switch[data-size=lg] .troupe-switch__track{inline-size:var(--troupe-switch-track-width-lg);block-size:var(--troupe-switch-track-height-lg);padding-inline:calc((var(--troupe-switch-track-height-lg) - var(--troupe-switch-thumb-size-lg)) / 2 - var(--troupe-border-width-default))}.troupe-switch[data-size=lg] .troupe-switch__thumb{inline-size:var(--troupe-switch-thumb-size-lg);block-size:var(--troupe-switch-thumb-size-lg)}.troupe-switch:where(:not([data-size]),[data-size=md]) .troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{inset-inline-start:calc(var(--troupe-switch-track-width-md) - var(--troupe-switch-track-height-md))}.troupe-switch[data-size=sm] .troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{inset-inline-start:calc(var(--troupe-switch-track-width-sm) - var(--troupe-switch-track-height-sm))}.troupe-switch[data-size=lg] .troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{inset-inline-start:calc(var(--troupe-switch-track-width-lg) - var(--troupe-switch-track-height-lg))}.troupe-switch__control:checked+.troupe-switch__track{border-color:var(--troupe-color-action-primary-default);background-color:var(--troupe-color-action-primary-default)}.troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{background-color:var(--troupe-color-text-on-action)}.troupe-switch:hover .troupe-switch__control:enabled:not(:checked)+.troupe-switch__track{border-color:var(--troupe-color-border-strong)}.troupe-switch:hover .troupe-switch__control:enabled:checked+.troupe-switch__track{border-color:var(--troupe-color-action-primary-hover);background-color:var(--troupe-color-action-primary-hover)}.troupe-switch:has(.troupe-switch__control:disabled){color:var(--troupe-color-text-disabled);cursor:not-allowed}.troupe-switch__control:disabled+.troupe-switch__track{border-color:var(--troupe-color-border-subtle);background-color:var(--troupe-color-surface-subtle)}.troupe-switch__control:disabled+.troupe-switch__track .troupe-switch__thumb{background-color:var(--troupe-color-text-disabled)}.troupe-switch__control:focus-visible+.troupe-switch__track{outline:var(--troupe-border-width-focus-visible) solid var(--troupe-color-border-focus-visible);outline-offset:var(--troupe-border-offset-focus-visible)}@media (prefers-reduced-motion:no-preference){.troupe-switch__thumb{transition-property:background-color,transform}.troupe-switch:where(:not([data-size]),[data-size=md]) .troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{transform:translateX(calc(var(--troupe-switch-track-width-md) - var(--troupe-switch-track-height-md)));inset-inline-start:0}.troupe-switch[data-size=sm] .troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{transform:translateX(calc(var(--troupe-switch-track-width-sm) - var(--troupe-switch-track-height-sm)));inset-inline-start:0}.troupe-switch[data-size=lg] .troupe-switch__control:checked+.troupe-switch__track .troupe-switch__thumb{transform:translateX(calc(var(--troupe-switch-track-width-lg) - var(--troupe-switch-track-height-lg)));inset-inline-start:0}}.example-row{align-items:center;gap:var(--troupe-space-stack-sm) var(--troupe-space-inline-md);flex-wrap:wrap;display:flex}.form-row{align-items:center;gap:var(--troupe-space-inline-md);display:flex}.states{border-collapse:collapse}.states th,.states td{padding:var(--troupe-space-inset-sm);text-align:start;vertical-align:middle}.states thead th{font-size:var(--troupe-font-size-caption);font-weight:var(--troupe-font-weight-strong);color:var(--troupe-color-text-subtle)}.panel:has(>.states){overflow-x:auto}pre{margin:0;overflow-x:auto}pre code{color:var(--troupe-color-text-default)}