@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
/**
 * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
 * Important: Always import this file _before_ layering your own styles!
 */
@layer lmvz-ds.theme {
/**
 * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
 */

@font-face {
  font-family: Router;
  src:
    local('RouterBook-Regular'),
    local('Router-Book'),
    url('/assets/fonts/Router-Book.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: Router;
  src:
    local('RouterMedium-Regular'),
    local('Router-Medium'),
    url('/assets/fonts/Router-Medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: Router;
  src:
    local('RouterBold-Regular'),
    local('Router-Bold'),
    url('/assets/fonts/Router-Bold.woff') format('woff');
  font-weight: 700;
}

}
:host {
  display: inline-flex;
  align-items: center;
  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
  padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
  /* TODO[LDHCID-136]: min-height currently below accessibility requirements for tap targets (44px) */
  /* min-height: 38px; */
  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
  cursor: pointer;
  background-color: transparent;
  user-select: none;
}
:host(:not([disabled]):hover) {
  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
}
:host([checked]) {
  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
}
:host([disabled][checked]) {
  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
}
:host([disabled]) {
  cursor: not-allowed;
  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
  pointer-events: none;
}
.track {
  position: relative;
  flex-shrink: 0;
  width: var(--lmvz-global-s32, 32px);
  height: var(--lmvz-global-s20, 20px);
  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
  background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);
}
:host(:not([disabled]):hover) .track {
  border-color: var(--lmvz-semantic-color-border-hover, #a1a1a1);
}
:host([checked]) .track {
  border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
}
input {
  /* visually hidden, keyboard-accessible */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.thumb {
  position: absolute;
  width: var(--lmvz-global-s13, 13px);
  height: var(--lmvz-global-s13, 13px);
  border-radius: 50%;
  background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
  top: 50%;
  transform: translateY(-50%);
  left: var(--lmvz-global-s4, 4px);
  /* TODO[LDHCID-136]: no DS motion/duration token — 0.2s ease from Figma interaction baseline */
  transition:
    left 0.2s ease,
    background-color 0.2s ease;
  pointer-events: none;
}
:host([checked]) .thumb {
  left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));
  background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
}
label {
  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
  color: var(--lmvz-semantic-color-on-surface-primary, #000000);
  cursor: pointer;
}