@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;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
  padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
  cursor: pointer;

  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);

  background: var(--lmvz-menuitem-background);
  color: var(--lmvz-menuitem-color);
}
:host(:hover) {
  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
}
:host(:active) {
  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
}
:host(:focus-visible) {
  /* work around siblings overlapping outline */
  z-index: 1;
}
:host([aria-expanded='true']) {
  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe);
  --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
}