@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: block;
font-family: var(--lmvz-global-font-family-default, Router);
/* Extra top space to accommodate the floating label */
--lmvz-internal-select-floating-label-top-offset: 0.375rem;
--lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
--lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
--lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7);
--lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
--lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);
--lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
--lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
--lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
--lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
--lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
--lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
--lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
--lmvz-select-label-minimized-padding-x: 4px;
--lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
--lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
--lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
--lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
padding-top: var(--lmvz-internal-select-floating-label-top-offset);
}
.select-wrapper {
position: relative;
height: var(--lmvz-select-height);
}
/* Floating label – positioned above the trigger when a value is selected */
label {
position: absolute;
top: 50%;
left: var(--lmvz-select-padding-x);
font-size: var(--lmvz-select-label-font-size);
color: var(--lmvz-select-label-color);
line-height: normal;
white-space: nowrap;
pointer-events: none;
z-index: 2;
transform: translateY(-50%);
transform-origin: left top;
transition:
top 0.2s ease-out,
transform 0.2s ease-out,
opacity 0.2s ease-out,
padding 0.2s ease-out;
}
label.assistive-label {
opacity: 0;
padding: 0;
}
label.floating-label {
top: var(--lmvz-select-label-top-offset);
transform: translateY(0) scale(0.85);
left: calc(var(--lmvz-select-padding-x) - 2px);
background-color: var(--lmvz-select-bg);
padding: 0 var(--lmvz-select-label-minimized-padding-x);
opacity: 1;
font-weight: 500;
}
label > span[aria-hidden='true'],
.select-trigger > span:first-child > span[aria-hidden='true'] {
color: var(--lmvz-select-error-color);
margin-left: 2px;
display: inline-block;
line-height: 0;
vertical-align: middle;
}
/* Combobox trigger — the accessible, interactive control (role="combobox") */
.select-trigger {
display: flex;
align-items: center;
gap: var(--lmvz-select-gap);
height: 100%;
width: 100%;
padding: 0 var(--lmvz-select-padding-x);
border-radius: var(--lmvz-select-radius);
background-color: var(--lmvz-select-bg);
border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color);
box-sizing: border-box;
cursor: pointer;
position: relative;
z-index: 1;
transition: border-color 0.15s ease;
}
:host(:not([disabled], [highlighted], [error])) .select-wrapper:hover .select-trigger {
border-color: var(--lmvz-select-border-color-hover);
}
:host([error]) .select-trigger {
border-color: var(--lmvz-select-error-color);
}
:host([highlighted]) .select-trigger {
background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
}
:host([highlighted]) .select-trigger > span:first-child {
color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
}
:host([highlighted]) label.floating-label {
background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
}
:host:has(:focus-visible) .select-trigger {
outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
}
.select-trigger > span:first-child {
flex: 1 0 0;
font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
Router);
color: var(--lmvz-select-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
/* Active-selected text color: when a value is selected (not applicable in highlighted state) */
:host(:not([highlighted])) .select-wrapper.has-value .select-trigger > span:first-child {
color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
}
.select-trigger > span:last-child {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.select-trigger svg {
width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
flex-shrink: 0;
}
/* Native