@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);
}

modus-wc-switch .modus-wc-toggle {
  border-radius: var(--rounded-badge);
}
modus-wc-switch .modus-wc-toggle:focus {
  border-color: var(--modus-wc-color-base-200);
}

[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-xs,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs {
  --handleoffset: var(--modus-wc-spacing-sm);
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-xl);
}
[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs ~ modus-wc-input-label .modus-wc-input-label,
[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs ~ modus-wc-input-label .modus-wc-input-label {
  font-size: var(--modus-wc-font-size-sm);
  line-height: var(--modus-wc-font-size-2xl);
}
[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-xs,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs {
  --handleoffset: var(--modus-wc-spacing-sm);
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-xl);
}
[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs ~ modus-wc-input-label .modus-wc-input-label,
[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs ~ modus-wc-input-label .modus-wc-input-label {
  font-size: var(--modus-wc-font-size-sm);
  line-height: var(--modus-wc-font-size-2xl);
}
[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);
}

[data-theme=modus-modern-light] modus-wc-switch modus-wc-input-label .modus-wc-input-label,
[data-theme=modus-modern-dark] modus-wc-switch modus-wc-input-label .modus-wc-input-label {
  color: var(--modus-wc-color-gray-10);
  padding-inline-start: var(--modus-wc-spacing-sm);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle {
  --fallback-b1: var(--modus-wc-color-gray-0);
  border: none;
  box-shadow: var(--handleoffsetcalculator) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, 0 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset;
  color: var(--modus-wc-color-white);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:indeterminate,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:indeterminate {
  box-shadow: calc(var(--handleoffset) / 2) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, calc(var(--handleoffset) / -2) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, 0 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset;
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:checked,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:checked {
  --fallback-b1: var(--modus-wc-color-primary);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:focus-visible,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:focus-visible {
  outline: var(--modus-wc-border-width-sm) solid var(--modus-wc-color-primary);
  outline-offset: var(--modus-wc-border-width-sm);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs {
  --handleoffset: var(--modus-wc-spacing-sm);
  height: var(--modus-wc-spacing-lg);
  width: var(--modus-wc-spacing-xl);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs ~ modus-wc-input-label .modus-wc-input-label,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs ~ modus-wc-input-label .modus-wc-input-label {
  font-size: var(--modus-wc-font-size-sm);
  line-height: var(--modus-wc-font-size-2xl);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm {
  --handleoffset: var(--modus-wc-spacing-md);
  height: var(--modus-wc-font-size-2xl);
  width: var(--modus-wc-spacing-2xl);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm ~ modus-wc-input-label .modus-wc-input-label,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm ~ modus-wc-input-label .modus-wc-input-label {
  font-size: var(--modus-wc-font-size-md);
  line-height: var(--modus-wc-line-height-md);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md {
  --handleoffset: var(--modus-wc-spacing-lg);
  height: var(--modus-wc-spacing-xl);
  width: var(--modus-wc-size-md);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md ~ modus-wc-input-label .modus-wc-input-label,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md ~ modus-wc-input-label .modus-wc-input-label {
  font-size: var(--modus-wc-font-size-lg);
  line-height: var(--modus-wc-line-height-md);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg {
  --handleoffset: var(--modus-wc-spacing-xl);
  height: var(--modus-wc-spacing-2xl);
  width: var(--modus-wc-size-xl);
}
[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg ~ modus-wc-input-label .modus-wc-input-label,
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg ~ modus-wc-input-label .modus-wc-input-label {
  font-size: var(--modus-wc-font-size-xl);
  line-height: var(--modus-wc-line-height-lg);
}

[data-theme=modus-modern-dark] modus-wc-switch modus-wc-input-label .modus-wc-input-label {
  color: var(--modus-wc-color-gray-light);
}
[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle {
  --fallback-b1: var(--modus-wc-color-gray-9);
}