igniteui-webcomponents/components/checkbox/themes/shared/switch/switch.material.css.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { css } from 'lit';
export const styles = css `:host{--size: 2.25rem;--thumb-size: 1.25rem;--thumb-offset: -0.0625rem;--label-gap: 0.75rem}[part~=base]:hover [part~=thumb]::after{background:var(--ig-gray-600);opacity:.06}[part~=base]:hover [part~=thumb][part~=checked]::after{background:var(--thumb-on-color);opacity:.06}[part~=base]:hover [part~=control]{border-color:var(--border-hover-color)}[part~=base]:hover [part~=control][part~=checked]{border-color:var(--border-on-hover-color)}[part~=base]:focus-visible [part~=thumb]::after,[part~=base] [part="control focused"] [part~=thumb]::after{background:var(--ig-gray-600);opacity:.12}[part~=base]:focus-visible [part~=thumb][part~=checked]::after,[part~=base] [part="control checked focused"] [part~=thumb][part~=checked]::after{background:var(--thumb-on-color);opacity:.12}[part~=control]{border-radius:var(--border-radius-track);width:var(--size);height:.875rem;background:var(--track-off-color);border:.0625rem solid var(--border-color);z-index:1}[part~=control][part~=checked]{background:var(--track-on-color);border-color:var(--border-on-color)}[part~=thumb]{border-radius:var(--border-radius-thumb);animation-name:thumb-off;width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);background:var(--thumb-off-color);box-shadow:var(--resting-elevation);margin-inline-start:var(--thumb-offset)}[part~=thumb]::after{border-radius:var(--border-radius-ripple);position:absolute;content:"";inset-block-start:calc(50% - 1.25rem);inset-inline-start:calc(50% - 1.25rem);width:2.5rem;height:2.5rem;overflow:hidden;z-index:-1}[part~=thumb][part~=checked]{background:var(--thumb-on-color);margin-inline-start:calc(var(--size) - var(--thumb-size) - var(--thumb-offset));animation-name:thumb-on;animation-duration:.2s;animation-fill-mode:forwards}:host([invalid]) [part~=control]{border-color:var(--track-error-color);background:var(--track-error-color)}:host([invalid]) [part~=thumb]{background:var(--error-color)}:host([invalid]) [part~=thumb][part~=checked]{background:var(--thumb-on-error-color)}:host([invalid]) [part~=thumb][part~=focused]::after{background:var(--error-color-hover)}:host([invalid]):hover [part~=thumb]::after{background:var(--error-color-hover)}:host(:not([disabled])[invalid]) [part~=control],:host(:not(:disabled)[invalid]) [part~=control]{background:var(--track-error-color)}`;
//# sourceMappingURL=switch.material.css.js.map