@layer components{.md3-switch-root{box-sizing:border-box;border-radius:var(--md-sys-shape-corner-full);border:2px solid var(--md-sys-color-outline);background:var(--md-sys-color-surface-container-highest);cursor:pointer;-webkit-tap-highlight-color:transparent;width:52px;height:32px;transition:background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);--_handle-size:16px;--_handle-x:16px;--_handle-color:var(--md-sys-color-outline);--_state-color:var(--md-sys-color-on-surface);outline:none;padding:0;display:inline-flex;position:relative}.md3-switch-root:after{content:"";width:max(48px,100%);height:max(48px,100%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.md3-switch-root[data-checked]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);--_handle-size:24px;--_handle-x:36px;--_handle-color:var(--md-sys-color-on-primary);--_state-color:var(--md-sys-color-primary)}.md3-switch-root:hover,.md3-switch-root:focus-visible{--_handle-color:var(--md-sys-color-on-surface-variant)}.md3-switch-root[data-checked]:hover,.md3-switch-root[data-checked]:focus-visible{--_handle-color:var(--md-sys-color-primary-container)}.md3-switch-root:active{--_handle-size:28px;--_handle-color:var(--md-sys-color-on-surface-variant)}.md3-switch-root[data-checked]:active{--_handle-color:var(--md-sys-color-primary-container)}.md3-switch-root:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md3-switch-thumb{top:50%;width:var(--_handle-size);height:var(--_handle-size);border-radius:var(--md-sys-shape-corner-full);background:var(--_handle-color);transition:inset-inline-start var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);position:absolute;inset-inline-start:calc(var(--_handle-x) - 2px - var(--_handle-size) / 2);transform:translateY(-50%)}.md3-switch-stateLayer{border-radius:var(--md-sys-shape-corner-full);background:var(--_state-color);opacity:0;width:40px;height:40px;transition:opacity 15ms linear;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.md3-switch-root:hover .md3-switch-stateLayer{opacity:var(--md-sys-state-hover-state-layer-opacity)}.md3-switch-root:focus-visible .md3-switch-stateLayer{opacity:var(--md-sys-state-focus-state-layer-opacity)}.md3-switch-root:active .md3-switch-stateLayer{opacity:var(--md-sys-state-pressed-state-layer-opacity)}.md3-switch-root[data-disabled]{cursor:default;pointer-events:none;background:color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);border-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);--_handle-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)}.md3-switch-root[data-disabled][data-checked]{background:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);--_handle-color:var(--md-sys-color-surface);border-color:#0000}}