/*!
 * Copyright 2026 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.switch{.switch{--handle-color: var(--md-sys-color-outline);--handle-size: 16px;--with-icon-handle-size: 24px;--icon-color: var(--md-sys-color-surface-container-highest);--icon-size: 18px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-size: 40px;--track-color: var(--md-sys-color-surface-container-highest);--track-height: 32px;--track-outline-color: var(--md-sys-color-outline);--track-outline-width: 2px;--track-width: 52px}.switch:is(:hover,.hover){--handle-color: var(--md-sys-color-on-surface-variant)}.switch:is(:checked,.checked,[aria-checked=true]){--track-color: var(--md-sys-color-primary);--track-outline-color: transparent;--handle-color: var(--md-sys-color-on-primary);--handle-size: 24px;--icon-color: var(--md-sys-color-on-primary-container);--state-layer-color: var(--md-sys-color-primary)}.switch:is(:checked,.checked,[aria-checked=true]):where(:hover,.hover){--handle-color: var(--md-sys-color-primary-container)}.switch:is(:active,.active):where(:not(:disabled,.disabled)){--handle-size: 28px}.switch:is(:disabled,.disabled){--handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 12% );--track-outline-color: hsl( from var(--md-sys-color-on-surface) h s l / 12% )}.switch:is(:disabled,.disabled):where(:checked,.checked,[aria-checked=true]){--handle-color: var(--md-sys-color-surface);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%)}.switch{display:inline-grid;grid-template:". handle ." 1fr/0fr min-content 1fr;place-items:center;appearance:none;background:var(--track-color);border:var(--track-outline-width) solid var(--track-outline-color);border-radius:calc(var(--track-height)/2);width:var(--track-width);height:var(--track-height);margin:0;padding:0;transition:grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);isolation:isolate;position:relative;color:var(--icon-color);--md-icon-size: var(--icon-size);--icon: ""}.switch:is(:checked,.checked,[aria-checked=true]){grid-template-columns:1fr min-content 0fr}.switch::before{--_handle-size: if( style(--icon: ""): var(--handle-size); else: max(var(--handle-size), var(--with-icon-handle-size)); );content:var(--icon);font:var(--md-icon-size) var(--md-icon-font);display:grid;place-items:center;z-index:-1;grid-area:handle;aspect-ratio:1;height:100%;clip-path:circle(calc(var(--_handle-size) / 2));transition:clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;background:var(--handle-color)}.switch::after{content:"";z-index:-1;position:absolute;grid-area:handle;background-image:var(--ripple);aspect-ratio:1;width:var(--state-layer-size);border-radius:50%;color:var(--state-layer-color);transition:var(--ripple-transition);animation:var(--ripple-animation)}.switch:has(.switch-icon-off:not(slot),.switch-icon-off.has-slotted){--icon: " "}.switch .switch-icon-off:not(slot),.switch .switch-icon-off::slotted(*),.switch .switch-icon-on:not(slot),.switch .switch-icon-on::slotted(*){grid-area:handle}.switch:is(:checked,.checked,[aria-checked=true]) .switch-icon-off,.switch:not(:checked,.checked,[aria-checked=true]) .switch-icon-on{display:none}}/*# sourceMappingURL=switch.css.map */