:host {
  --_size: var(--badge-size-md);
  --_min-width: var(--badge-min-width-md);
  --_padding-inline: var(--badge-padding-inline-md);
  --_font-size: var(--badge-font-size-md);
  --_line-height: var(--badge-line-height-md);
  --_background: var(--badge-background-danger);
  --_color: var(--badge-text-danger);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  block-size: var(--_size);
  min-inline-size: var(--_min-width);
  padding-inline: var(--_padding-inline);
  background: var(--_background);
  color: var(--_color);
  font-family: var(--badge-font-family);
  font-size: var(--_font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--_line-height);
  text-align: center;
  white-space: nowrap;
  border-radius: var(--badge-border-radius);
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  vertical-align: middle;
}

/* Sizes — five-step scale matching Figma masters 551:17421. */
:host([size='xs']) {
  --_size: var(--badge-size-xs);
  --_min-width: var(--badge-min-width-xs);
  --_padding-inline: var(--badge-padding-inline-xs);
  --_font-size: var(--badge-font-size-xs);
  --_line-height: var(--badge-line-height-xs);
}

:host([size='sm']) {
  --_size: var(--badge-size-sm);
  --_min-width: var(--badge-min-width-sm);
  --_padding-inline: var(--badge-padding-inline-sm);
  --_font-size: var(--badge-font-size-sm);
  --_line-height: var(--badge-line-height-sm);
}

:host([size='md']) {
  --_size: var(--badge-size-md);
  --_min-width: var(--badge-min-width-md);
  --_padding-inline: var(--badge-padding-inline-md);
  --_font-size: var(--badge-font-size-md);
  --_line-height: var(--badge-line-height-md);
  --_dot-size: var(--badge-dot-size-md);
}

:host([size='lg']) {
  --_size: var(--badge-size-lg);
  --_min-width: var(--badge-min-width-lg);
  --_padding-inline: var(--badge-padding-inline-lg);
  --_font-size: var(--badge-font-size-lg);
  --_line-height: var(--badge-line-height-lg);
  --_dot-size: var(--badge-dot-size-lg);
}

:host([size='xl']) {
  --_size: var(--badge-size-xl);
  --_min-width: var(--badge-min-width-xl);
  --_padding-inline: var(--badge-padding-inline-xl);
  --_font-size: var(--badge-font-size-xl);
  --_line-height: var(--badge-line-height-xl);
  --_dot-size: var(--badge-dot-size-xl);
}

/* Variants */
:host([variant='default']) {
  --_background: var(--badge-background-default);
  --_color: var(--badge-text-default);
}

:host([variant='brand']) {
  --_background: var(--badge-background-brand);
  --_color: var(--badge-text-brand);
}

:host([variant='positive']) {
  --_background: var(--badge-background-positive);
  --_color: var(--badge-text-positive);
}

:host([variant='warning']) {
  --_background: var(--badge-background-warning);
  --_color: var(--badge-text-warning);
}

:host([variant='danger']) {
  --_background: var(--badge-background-danger);
  --_color: var(--badge-text-danger);
}

/* Disabled — replaces every variant color. Declared after the variants and at
   least as specific, 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'])) {
  --_background: var(--badge-background-disabled);
  --_color: var(--badge-text-disabled);
}

/* Dot variant: padding collapses, width matches height (a circle). xs/sm are
   solid pips; md/lg/xl carry a small centered inner dot per Figma 551:18330.
   `xs` is dot-only — it renders as a circle even when type='numbered'. */
:host([type='dot']),
:host([size='xs']) {
  padding-inline: 0;
  min-inline-size: var(--_size);
  inline-size: var(--_size);
}

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Inner presence pip — centered dot for md/lg/xl dot badges. Uses the variant
   foreground colour so it inherits the same on-color contrast as the count. */
.badge-dot {
  flex: 0 0 auto;
  inline-size: var(--_dot-size);
  block-size: var(--_dot-size);
  border-radius: var(--badge-border-radius);
  background: var(--_color);
}