@universal-material/web/switch/switch.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    --_state-layer-padding: var(--u-switch-state-layer-padding, 4px);
    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
    --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
    display: inline-block;
    vertical-align: middle;
  }

  .container {
    cursor: pointer;
    position: relative;
    width: var(--_width);
    height: var(--_height);
    padding: var(--_state-layer-padding);
    border-radius: var(--u-shape-corner-full, 9999px);
  }

  :host([hide-state-layer]) .container {
    width: var(--_indicator-size);
    height: var(--_indicator-size);
    padding: 0;
  }
  :host([hide-state-layer]) u-ripple {
    display: none;
  }

  input {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: inherit;
    appearance: none;
  }

  u-ripple {
    padding: var(--_state-layer-padding);
  }

  .indicator-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    pointer-events: none;
  }

  input:checked ~ .indicator-container {
    --_indicator-color: var(--u-switch-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
  }

  :host([disabled]) {
    opacity: var(--u-switch-disabled-state-opacity, 0.38);
  }
  :host([disabled]) input,
  :host([disabled]) .container {
    cursor: default;
  }
  :host([disabled]) .indicator-container {
    --_indicator-color: var(--u-switch-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
  }

  :host {
    --_width: 3.25rem;
    --_height: 2rem;
    --_state-layer-padding: 0;
    --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));
    --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);
    --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
    --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);
    --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);
    --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);
  }

  .indicator-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: var(--_height);
    transition: width 200ms;
  }

  .state-layer,
  .indicator {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .indicator {
    width: var(--_height);
    height: var(--_height);
  }

  .state-layer {
    flex-shrink: 0;
    width: var(--_state-layer-size);
    height: var(--_state-layer-size);
    border-radius: var(--u-shape-corner-full, 9999px);
  }

  .handle {
    width: var(--_unselected-handle-size);
    height: var(--_unselected-handle-size);
    background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));
    border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));
    transition: background 200ms, width 200ms, height 200ms;
  }

  input {
    border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));
    background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));
    transition: background 200ms, border-color 200ms;
  }
  input:checked {
    background-color: var(--_selected-track-background);
    border-color: var(--_selected-track-background);
  }
  input:checked ~ .indicator-container {
    width: 100%;
  }
  input:checked ~ .indicator-container .handle {
    width: var(--_selected-handle-size);
    height: var(--_selected-handle-size);
    background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));
  }

  @media (hover: hover) {
    :host(:not([disabled]):hover) .state-layer {
      background-color: color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)), transparent);
    }
  }
  :host(:not([disabled]):active) .indicator-container .handle {
    width: var(--_active-handle-size);
    height: var(--_active-handle-size);
  }
`;
//# sourceMappingURL=switch.styles.js.map