:host {
  /* Size axis defaults (md) */
  --_height: var(--tag-container-height-md);
  --_min-width: var(--tag-container-min-width-md);
  --_padding-inline: var(--tag-container-padding-inline-md);
  --_padding-inline-icon: var(--tag-container-padding-inline-icon-md);
  --_gap: var(--tag-container-gap-md);
  --_font-size: var(--tag-label-font-size-md);
  --_line-height: var(--tag-label-line-height-md);
  --_icon-size: var(--tag-icon-size-md);

  /* Type × semantic defaults (subtle · neutral) */
  --_bg: var(--tag-subtle-background-neutral);
  --_label-color: var(--tag-subtle-label-neutral);
  --_border-color: transparent;
  --_border-width: 0;

  /* Status vs Info weight */
  --_font-weight: var(--tag-label-font-weight-status);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  block-size: var(--_height);
  min-inline-size: var(--_min-width);
  padding-block: 0;
  padding-inline: var(--_padding-inline);
  gap: var(--_gap);

  background-color: var(--_bg);
  color: var(--_label-color);
  /* Figma strokes the Outlined tag inside its box (tag-outlined 624:4767; a
     52x24 export, the same width as a filled tag). An inset shadow keeps the
     stroke out of the layout, where a border would widen the tag by 2px and
     push the label 1px in. */
  border: 0;
  box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
  border-radius: var(--tag-container-border-radius);

  font-family: var(--tag-label-font-family);
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  font-weight: var(--_font-weight);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  overflow: hidden;
}

/* ---------- Size axis ---------- */

:host([size='sm']) {
  --_height: var(--tag-container-height-sm);
  --_min-width: var(--tag-container-min-width-sm);
  --_padding-inline: var(--tag-container-padding-inline-sm);
  --_padding-inline-icon: var(--tag-container-padding-inline-icon-sm);
  --_gap: var(--tag-container-gap-sm);
  --_font-size: var(--tag-label-font-size-sm);
  --_line-height: var(--tag-label-line-height-sm);
  --_icon-size: var(--tag-icon-size-sm);
}

/* ---------- Variant: info uses regular weight + tighter padding ---------- */

:host([variant='info']) {
  --_font-weight: var(--tag-label-font-weight-info);
  --_padding-inline: var(--tag-container-padding-inline-sm);
  --_padding-inline-icon: var(--tag-info-padding-inline-icon);
}

/* ---------- Type × semantic: subtle ---------- */

:host([type='subtle']) {
  --_border-width: 0;
}

:host([type='subtle'][semantic='neutral']) {
  --_bg: var(--tag-subtle-background-neutral);
  --_label-color: var(--tag-subtle-label-neutral);
}
:host([type='subtle'][semantic='muted']) {
  --_bg: var(--tag-subtle-background-muted);
  --_label-color: var(--tag-subtle-label-muted);
}
:host([type='subtle'][semantic='accent']) {
  --_bg: var(--tag-subtle-background-accent);
  --_label-color: var(--tag-subtle-label-accent);
}
:host([type='subtle'][semantic='success']) {
  --_bg: var(--tag-subtle-background-success);
  --_label-color: var(--tag-subtle-label-success);
}
:host([type='subtle'][semantic='brand']) {
  --_bg: var(--tag-subtle-background-brand);
  --_label-color: var(--tag-subtle-label-brand);
}
:host([type='subtle'][semantic='danger']) {
  --_bg: var(--tag-subtle-background-danger);
  --_label-color: var(--tag-subtle-label-danger);
}

/* ---------- Type × semantic: strong ---------- */

:host([type='strong']) {
  --_border-width: 0;
}

:host([type='strong'][semantic='neutral']) {
  --_bg: var(--tag-strong-background-neutral);
  --_label-color: var(--tag-strong-label-neutral);
}
:host([type='strong'][semantic='muted']) {
  --_bg: var(--tag-strong-background-muted);
  --_label-color: var(--tag-strong-label-muted);
}
:host([type='strong'][semantic='accent']) {
  --_bg: var(--tag-strong-background-accent);
  --_label-color: var(--tag-strong-label-accent);
}
:host([type='strong'][semantic='success']) {
  --_bg: var(--tag-strong-background-success);
  --_label-color: var(--tag-strong-label-success);
}
:host([type='strong'][semantic='brand']) {
  --_bg: var(--tag-strong-background-brand);
  --_label-color: var(--tag-strong-label-brand);
}
:host([type='strong'][semantic='danger']) {
  --_bg: var(--tag-strong-background-danger);
  --_label-color: var(--tag-strong-label-danger);
}

/* ---------- Type: outlined (transparent fill, semantic border) ---------- */

:host([type='outlined']) {
  --_bg: var(--tag-outlined-background);
  --_border-width: var(--tag-container-border-width);
}

:host([type='outlined'][semantic='neutral']) {
  --_label-color: var(--tag-outlined-label-neutral);
  --_border-color: var(--tag-outlined-border-neutral);
}
:host([type='outlined'][semantic='muted']) {
  --_label-color: var(--tag-outlined-label-muted);
  --_border-color: var(--tag-outlined-border-muted);
}
:host([type='outlined'][semantic='accent']) {
  --_label-color: var(--tag-outlined-label-accent);
  --_border-color: var(--tag-outlined-border-accent);
}
:host([type='outlined'][semantic='success']) {
  --_label-color: var(--tag-outlined-label-success);
  --_border-color: var(--tag-outlined-border-success);
}
:host([type='outlined'][semantic='brand']) {
  --_label-color: var(--tag-outlined-label-brand);
  --_border-color: var(--tag-outlined-border-brand);
}
:host([type='outlined'][semantic='danger']) {
  --_label-color: var(--tag-outlined-label-danger);
  --_border-color: var(--tag-outlined-border-danger);
}

/* ---------- Info tag colours ----------
   Figma's info-tag (624:8934) is its own set with no semantic axis: Strong is
   a #E8F0FB fill under a #383838 label, Subtle has no fill and a #757575
   label. Declared after the type × semantic rules, which they replace for the
   info variant; `semantic` does not change an info tag. */
:host([variant='info'][type='strong']) {
  --_bg: var(--tag-info-strong-background);
  --_label-color: var(--tag-info-strong-label);
}

:host([variant='info'][type='subtle']) {
  --_bg: var(--tag-info-subtle-background);
  --_label-color: var(--tag-info-subtle-label);
}

/* ---------- Disabled (replaces every type × semantic color) ---------- */

/* Declared after the type × semantic rules; each selector is at least as
   specific as theirs, so it wins. `[disabled='false']` is excluded because
   Stencil reads that attribute as `disabled = false` but leaves it on the host. */
:host([disabled]:not([disabled='false']):not([type='outlined'])) {
  --_bg: var(--tag-disabled-background);
  --_label-color: var(--tag-disabled-label);
}

:host([disabled]:not([disabled='false'])[type='outlined']) {
  --_label-color: var(--tag-disabled-outlined-label);
  --_border-color: var(--tag-disabled-outlined-border);
}

/* ---------- Asymmetric padding when icons present ---------- */

/* Leading icon → pull leading edge tighter so glyph hugs the surface. */
:host(.has-icon-start) {
  padding-inline-start: var(--_padding-inline-icon);
}

/* Trailing icon → mirror on the trailing edge. */
:host(.has-icon-end) {
  padding-inline-end: var(--_padding-inline-icon);
}

/* ---------- Label ---------- */

.label {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label:empty {
  display: none;
}

/* ---------- Slotted icons ---------- */

::slotted([slot='icon-start']),
::slotted([slot='icon-end']) {
  flex-shrink: 0;
  display: inline-flex;
  inline-size: var(--_icon-size);
  block-size: var(--_icon-size);
  color: currentcolor;
}

::slotted(mud-icon[slot='icon-start']),
::slotted(mud-icon[slot='icon-end']) {
  --icon-color: currentcolor;
}