@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.reset {
body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

*[hidden] {
  display: none !important;
}

hr {
  height: 0;
  border: none;
  margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
  border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
  display: block;
}

}
:host {
  display: inline-block;
  flex: none;
}
:host([disabled]) {
  cursor: not-allowed;
  pointer-events: none;
}
button {
  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
  --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);

  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lmvz-component-component-spacing-0-default, 4px);

  padding-top: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
  padding-bottom: var(--lmvz-dimension-14-8, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));
  padding-inline: var(--lmvz-dimension-24-16, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));

  border: none;
  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
  background: var(--lmvz-tab-background);
  color: var(--lmvz-tab-color);

  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
    Router);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
button:focus-visible {
  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
  z-index: 1;
}
button:disabled {
  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
  pointer-events: none;
  cursor: not-allowed;
}
button:hover {
  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000);
}
button:active {
  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
}
:host([has-media]) {
  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
  --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
}
:host([has-media]) button {
  padding-top: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
  padding-bottom: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
  padding-inline: var(--lmvz-dimension-48-40, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));
  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
}
:host([has-media]) button:hover {
  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
}
:host([has-media]) button:active {
  --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
}
:host([selected]) button {
  --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
  --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe);
}
:host([selected][has-media]) button:hover,
:host([selected][has-media]) button:active {
  --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
}
.indicator {
  /* TODO: replace with a design token if one is introduced for tab indicator border */
  --lmvz-tab-indicator-size: 4px;

  position: absolute;
  background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
  opacity: 0;
  transition: opacity 0.15s ease;

  /* Horizontal: full-width bar at bottom */
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--lmvz-tab-indicator-size);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: var(--lmvz-tab-indicator-size);
  border-end-end-radius: var(--lmvz-tab-indicator-size);
}
:host([selected][has-media]) .indicator {
  opacity: 1;
}
:host([vertical]) button {
  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
}
:host([vertical]) .indicator {
  /* Vertical: narrow bar at inline-start edge */
  inset-block: 0;
  inset-inline: 0 auto;
  inline-size: var(--lmvz-tab-indicator-size);
  block-size: auto;
  border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;
  background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
}
::slotted(*) {
  --lmvz-component-color: var(--lmvz-tab-color);
}
::slotted(lmvz-icon) {
  --lmvz-component-size: var(--lmvz-dimension-18-16, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
}
:host([has-media]) ::slotted(lmvz-icon) {
  --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem));
}
.label {
  display: contents;
}