@layer m3-components{.m3-switch{--_w:52px;--_h:32px;--_hs-off:16px;--_hs-on:24px;--_hs-press:28px;--_halo:40px;--_icon:16px;align-items:center;gap:var(--md-sys-space-3);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:inline-flex}.m3-switch__track{width:var(--_w);height:var(--_h);border-radius:calc(var(--_h) / 2);background:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 0 0 2px var(--md-sys-color-outline);transition:background-color var(--md-sys-motion-t-fx-small),box-shadow var(--md-sys-motion-t-fx-small);flex:none;position:relative}.m3-switch__input{appearance:none;width:max(100%,var(--md-sys-size-touch));height:max(100%,var(--md-sys-size-touch));opacity:0;cursor:inherit;z-index:1;margin:0;position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.m3-switch__handle{--_hs:var(--_hs-off);--_x:calc(var(--_h) / 2);width:var(--_hs);height:var(--_hs);translate:calc(var(--_x) - var(--_hs) / 2) -50%;background:var(--md-sys-color-outline);color:var(--md-sys-color-surface-container-highest);transition:width var(--md-sys-motion-t-small),height var(--md-sys-motion-t-small),translate var(--md-sys-motion-t-small),background-color var(--md-sys-motion-t-fx-small);border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:0}.m3-switch[data-icons] .m3-switch__handle{--_hs:var(--_hs-on)}.m3-switch__input:checked~.m3-switch__handle{--_hs:var(--_hs-on);--_x:calc(var(--_w) - var(--_h) / 2);background:var(--md-sys-color-on-primary);color:var(--md-sys-color-on-primary-container)}.m3-switch:active .m3-switch__handle{--_hs:var(--_hs-press);transition-duration:var(--md-sys-motion-dur-instant),var(--md-sys-motion-dur-instant),var(--md-sys-motion-dur-small),var(--md-sys-motion-fx-small)}.m3-switch:has(.m3-switch__input:checked) .m3-switch__track{background:var(--md-sys-color-primary);box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}.m3-switch__halo{width:var(--_halo);height:var(--_halo);background:var(--md-sys-color-on-surface);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-t-state);border-radius:50%;position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.m3-switch:has(.m3-switch__input:checked) .m3-switch__halo{background:var(--md-sys-color-primary)}@media (hover:hover){.m3-switch:hover .m3-switch__halo{opacity:var(--md-sys-state-hover-opacity)}}.m3-switch__input:focus-visible~.m3-switch__handle .m3-switch__halo{opacity:var(--md-sys-state-focus-opacity)}.m3-switch__track:has(.m3-switch__input:focus-visible){outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:var(--md-sys-focus-offset)}.m3-switch__icon{--m3-icon-size:var(--_icon);opacity:0;transition:opacity var(--md-sys-motion-t-fx-micro);position:absolute}.m3-switch__input:checked~.m3-switch__handle .m3-switch__icon--on,.m3-switch__input:not(:checked)~.m3-switch__handle .m3-switch__icon--off{opacity:1}.m3-switch__label{color:var(--md-sys-color-on-surface)}.m3-switch[data-disabled]{cursor:default;pointer-events:none}.m3-switch[data-disabled] .m3-switch__track{opacity:.38}.m3-switch[data-disabled] .m3-switch__label{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent)}@media (forced-colors:active){.m3-switch__track{box-shadow:none;border:2px solid buttontext}.m3-switch__handle{background:buttontext}}}@layer m3-density{:root[data-density=compact] .m3-switch{--_w:40px;--_h:24px;--_hs-off:12px;--_hs-on:18px;--_hs-press:20px;--_halo:32px;--_icon:12px}}