:host {
  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000);

  padding-block: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
  padding-inline: var(--lmvz-dimension-10-8, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
  border: 1px solid var(--lmvz-chip-border-color);
  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem) / 1.5
    Router);
  background-color: var(--lmvz-chip-background-color);
  color: var(--lmvz-chip-foreground-color);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));

  /* enable truncated content */
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;

  > .content-overflow-wrapper {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

:host([size='small']) {
  padding-block: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
  padding-inline: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5
    Router);
  gap: var(--lmvz-dimension-4-2, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
}

::slotted(*) {
  /* non-inline contents are forbidden for chips */
  /* TODO: validate using ARIA validation tooling, instead of overriding styles */
  display: inline;
  white-space: inherit;
}

::slotted(lmvz-icon) {
  --lmvz-component-color: var(--lmvz-chip-foreground-color);
  --lmvz-component-size: var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
}

:host([size='small']) ::slotted(lmvz-icon) {
  --lmvz-component-size: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
}

:host([type='active']) {
  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
}

:host([type='warning']) {
  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);
  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #ffeeb8);
  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #614a00);
}

:host([type='success']) {
  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #4eb6a9);
  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #c2e6e1);
  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #28625b);
}

:host([type='error']) {
  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b);
  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fbdfe0);
  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
}

:host([type='neutral']) {
  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #000000);
}