@trimble-oss/moduswebcomponents/collection/components/modus-wc-switch/modus-wc-switch.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-switch.modus-wc-switch-host {
  --rounded-badge: 32px;
  align-items: center;
  display: flex;
}
modus-wc-switch.modus-wc-switch-host .modus-wc-input-label {
  font-weight: var(--modus-wc-font-weight-normal);
  padding-inline-start: var(--modus-wc-spacing-md);
}

[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle {
  background-color: var(--modus-wc-color-white);
  border: none;
  color: var(--modus-wc-color-gray-4);
  outline-color: var(--modus-wc-color-highlight-blue);
  --fallback-b1: var(--modus-wc-color-gray-4);
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm {
  --handleoffset: 1rem;
  height: 1rem;
  width: 2rem;
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md {
  --handleoffset: 1.25rem;
  height: 1.25rem;
  width: 2.5rem;
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg {
  --handleoffset: 1.5rem;
  height: 1.5rem;
  width: 3rem;
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:checked,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:checked {
  --fallback-b1: var(--modus-wc-color-blue-light);
  color: var(--modus-wc-color-blue-light);
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked),
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked) {
  background-color: var(--modus-wc-color-white);
  outline: 2px solid var(--modus-wc-color-blue-light);
  outline-offset: -2px;
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked {
  background-color: var(--modus-wc-color-white);
  --fallback-b1: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible {
  outline: 2px solid var(--modus-wc-color-highlight-blue);
  outline-offset: 2px;
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:disabled,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:disabled {
  background-color: var(--modus-wc-color-white);
}

[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:checked {
  --fallback-b1: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked) {
  background-color: var(--modus-wc-color-white);
  outline: 2px solid var(--modus-wc-color-highlight-blue);
  outline-offset: -2px;
}
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked {
  background-color: var(--modus-wc-color-white);
  --fallback-b1: var(--modus-wc-color-blue-light);
}

[data-theme=connect-light] modus-wc-switch .modus-wc-toggle,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle {
  background-color: var(--modus-wc-color-white);
  border: none;
  color: var(--modus-wc-color-gray-4);
  outline-color: var(--modus-wc-color-highlight-blue);
  --fallback-b1: var(--modus-wc-color-gray-4);
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm {
  --handleoffset: 1rem;
  height: 1rem;
  width: 2rem;
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md {
  --handleoffset: 1.25rem;
  height: 1.25rem;
  width: 2.5rem;
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg {
  --handleoffset: 1.5rem;
  height: 1.5rem;
  width: 3rem;
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:checked,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:checked {
  --fallback-b1: var(--modus-wc-color-blue-light);
  color: var(--modus-wc-color-blue-light);
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked),
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked) {
  background-color: var(--modus-wc-color-white);
  outline: 2px solid var(--modus-wc-color-blue-light);
  outline-offset: -2px;
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked {
  background-color: var(--modus-wc-color-white);
  --fallback-b1: var(--modus-wc-color-trimble-blue);
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible {
  outline: 2px solid var(--modus-wc-color-highlight-blue);
  outline-offset: 2px;
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:disabled,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:disabled {
  background-color: var(--modus-wc-color-white);
}

[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:checked {
  --fallback-b1: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-highlight-blue);
}
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked) {
  background-color: var(--modus-wc-color-white);
  outline: 2px solid var(--modus-wc-color-highlight-blue);
  outline-offset: -2px;
}
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked {
  background-color: var(--modus-wc-color-white);
  --fallback-b1: var(--modus-wc-color-blue-light);
}