igniteui-webcomponents/components/checkbox/themes/shared/switch/switch.fluent.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.5rem;--thumb-size: 0.75rem;--border-size: 0.125rem;--thumb-offset: calc(var(--thumb-size) / 2 - 0.1875rem);--label-gap: 0.5rem}[part~=control]{border-radius:var(--border-radius-track);width:var(--size);height:1.25rem;background:var(--track-off-color);border:.0625rem solid var(--border-color)}[part~=control][part~=checked]{background:var(--track-on-color);border-color:var(--border-on-color)}[part~=thumb]{border-radius:var(--border-radius-thumb);width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);margin-inline-start:var(--thumb-offset);background:var(--thumb-off-color)}[part~=thumb][part~=checked]{margin-inline-start:calc(100% - var(--thumb-size) - var(--thumb-offset));background:var(--thumb-on-color)}[part~=label]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=focused]{position:relative}[part~=focused]::after{content:"";position:absolute;top:-0.1875rem;left:-0.1875rem;box-shadow:0 0 0 .0625rem var(--focus-outline-color);width:calc(100% + 0.1875rem*2);height:calc(100% + 0.1875rem*2)}:host(:not([disabled]):hover) [part~=control],:host(:not(:disabled):hover) [part~=control]{border-color:var(--border-hover-color)}:host(:not([disabled]):hover) [part~=control][part~=checked],:host(:not(:disabled):hover) [part~=control][part~=checked]{background:var(--track-on-hover-color);border-color:var(--border-on-hover-color)}:host(:not([disabled]):hover) [part~=thumb],:host(:not(:disabled):hover) [part~=thumb]{background:var(--border-hover-color)}:host(:not([disabled]):hover) [part~=thumb][part~=checked],:host(:not(:disabled):hover) [part~=thumb][part~=checked]{background:var(--thumb-on-color)}:host(:not([disabled])[invalid]) [part~=control][part~=checked],:host(:not(:disabled)[invalid]) [part~=control][part~=checked]{background:var(--track-error-color)}:host(:not([disabled])[invalid]) [part~=control],:host(:not([disabled])[invalid]) [part~=control][part~=checked],:host(:not(:disabled)[invalid]) [part~=control],:host(:not(:disabled)[invalid]) [part~=control][part~=checked]{border-color:var(--error-color)}:host(:not([disabled])[invalid]) [part~=thumb],:host(:not(:disabled)[invalid]) [part~=thumb]{background:var(--error-color)}:host(:not([disabled])[invalid]) [part~=control][part~=focused],:host(:not([disabled])[invalid]) [part~=control][part~=checked][part~=focused],:host(:not(:disabled)[invalid]) [part~=control][part~=focused],:host(:not(:disabled)[invalid]) [part~=control][part~=checked][part~=focused]{box-shadow:0 0 0 .125rem var(--error-color-hover)}:host(:not([disabled])[invalid]) [part~=thumb][part~=checked],:host(:not(:disabled)[invalid]) [part~=thumb][part~=checked]{background:var(--thumb-on-error-color)}`;
//# sourceMappingURL=switch.fluent.css.js.map