:host {
  --_height: var(--button-container-height-md);
  --_touch-target: var(--button-container-touch-target-md);
  --_min-width: var(--button-container-min-width-md);
  --_max-width: var(--button-container-max-width);
  --_padding-inline: var(--button-container-padding-inline-md);
  --_padding-inline-icon: var(--button-container-padding-inline-icon-md);
  --_gap: var(--button-container-gap-md);
  --_border-radius: var(--button-container-border-radius-rectangular-md);
  --_font-size: var(--button-label-font-size-md);
  --_line-height: var(--button-label-line-height-md);
  --_icon-size: var(--button-icon-size-md);
  --_bg: var(--button-primary-background-default);
  --_bg-hover: var(--button-primary-background-hover);
  --_bg-active: var(--button-primary-background-active);
  --_label: var(--button-primary-label);
  --_label-hover: var(--_label);
  --_label-active: var(--_label);
  --_icon: var(--button-primary-icon);
  --_border-width: 0;
  --_border-color: transparent;
  --_border-color-hover: var(--_border-color);
  --_border-color-active: var(--_border-color);

  display: inline-flex;
  vertical-align: middle;
}

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

:host([size='sm']) {
  --_height: var(--button-container-height-sm);
  --_touch-target: var(--button-container-touch-target-sm);
  --_min-width: var(--button-container-min-width-sm);
  --_padding-inline: var(--button-container-padding-inline-sm);
  --_padding-inline-icon: var(--button-container-padding-inline-icon-sm);
  --_gap: var(--button-container-gap-sm);
  --_border-radius: var(--button-container-border-radius-rectangular-sm);
  --_font-size: var(--button-label-font-size-sm);
  --_line-height: var(--button-label-line-height-sm);
  --_icon-size: var(--button-icon-size-sm);
}

:host([size='md']) {
  --_height: var(--button-container-height-md);
  --_touch-target: var(--button-container-touch-target-md);
  --_min-width: var(--button-container-min-width-md);
  --_padding-inline: var(--button-container-padding-inline-md);
  --_padding-inline-icon: var(--button-container-padding-inline-icon-md);
  --_gap: var(--button-container-gap-md);
  --_border-radius: var(--button-container-border-radius-rectangular-md);
  --_font-size: var(--button-label-font-size-md);
  --_line-height: var(--button-label-line-height-md);
  --_icon-size: var(--button-icon-size-md);
}

:host([size='lg']) {
  --_height: var(--button-container-height-lg);
  --_touch-target: var(--button-container-touch-target-lg);
  --_min-width: var(--button-container-min-width-lg);
  --_padding-inline: var(--button-container-padding-inline-lg);
  --_padding-inline-icon: var(--button-container-padding-inline-icon-lg);
  --_gap: var(--button-container-gap-lg);
  --_border-radius: var(--button-container-border-radius-rectangular-lg);
  --_font-size: var(--button-label-font-size-lg);
  --_line-height: var(--button-label-line-height-lg);
  --_icon-size: var(--button-icon-size-lg);
}

/* ---------- Shape axis ---------- */

:host([shape='circular'][size='sm']) {
  --_border-radius: var(--button-container-border-radius-circular-sm);
}
:host([shape='circular'][size='md']) {
  --_border-radius: var(--button-container-border-radius-circular-md);
}
:host([shape='circular'][size='lg']) {
  --_border-radius: var(--button-container-border-radius-circular-lg);
}

/* ---------- Variant axis ---------- */

:host([variant='primary']) {
  --_bg: var(--button-primary-background-default);
  --_bg-hover: var(--button-primary-background-hover);
  --_bg-active: var(--button-primary-background-active);
  --_label: var(--button-primary-label);
  --_icon: var(--button-primary-icon);
}

:host([variant='secondary']) {
  --_bg: var(--button-secondary-background-default);
  --_bg-hover: var(--button-secondary-background-hover);
  --_bg-active: var(--button-secondary-background-active);
  --_label: var(--button-secondary-label);
  --_icon: var(--button-secondary-icon);
}

:host([variant='strict']) {
  --_bg: var(--button-strict-background-default);
  --_bg-hover: var(--button-strict-background-hover);
  --_bg-active: var(--button-strict-background-active);
  --_label: var(--button-strict-label);
  --_icon: var(--button-strict-icon);
}

:host([variant='neutral']) {
  --_bg: var(--button-neutral-background-default);
  --_bg-hover: var(--button-neutral-background-hover);
  --_bg-active: var(--button-neutral-background-active);
  --_label: var(--button-neutral-label);
  --_icon: var(--button-neutral-icon);
}

:host([variant='destructive']) {
  --_bg: var(--button-destructive-background-default);
  --_bg-hover: var(--button-destructive-background-hover);
  --_bg-active: var(--button-destructive-background-active);
  --_label: var(--button-destructive-label);
  --_icon: var(--button-destructive-icon);
}

/* ---------- Appearance axis ---------- */

/* Outlined — 1.5px border by default, transparent fill, label brand-coloured.
   On hover/active the border drops (transparent) and the fill turns solid
   brand-default-hover/active, with the label flipping to on-color white —
   per Figma, outlined visually converges to filled on interaction. */
:host([appearance='outlined']) {
  --_border-width: var(--border-width-1-5);
  --_bg: transparent;
}

:host([appearance='outlined'][variant='primary']) {
  --_border-color: var(--button-outlined-primary-border-default);
  --_border-color-hover: var(--button-outlined-primary-border-hover);
  --_border-color-active: var(--button-outlined-primary-border-active);
  --_label: var(--button-outlined-primary-label-default);
  --_label-hover: var(--button-outlined-primary-label-hover);
  --_label-active: var(--button-outlined-primary-label-active);
  --_icon: var(--button-outlined-primary-icon-default);
  --_bg-hover: var(--button-outlined-primary-background-hover);
  --_bg-active: var(--button-outlined-primary-background-active);
}

:host([appearance='outlined'][variant='strict']) {
  --_border-color: var(--button-outlined-strict-border-default);
  --_border-color-hover: var(--button-outlined-strict-border-hover);
  --_border-color-active: var(--button-outlined-strict-border-active);
  --_label: var(--button-outlined-strict-label-default);
  --_label-hover: var(--button-outlined-strict-label-hover);
  --_label-active: var(--button-outlined-strict-label-active);
  --_icon: var(--button-outlined-strict-icon-default);
  --_bg-hover: var(--button-outlined-strict-background-hover);
  --_bg-active: var(--button-outlined-strict-background-active);
}

:host([appearance='outlined'][variant='destructive']) {
  --_border-color: var(--button-outlined-destructive-border-default);
  --_border-color-hover: var(--button-outlined-destructive-border-hover);
  --_border-color-active: var(--button-outlined-destructive-border-active);
  --_label: var(--button-outlined-destructive-label-default);
  --_label-hover: var(--button-outlined-destructive-label-hover);
  --_label-active: var(--button-outlined-destructive-label-active);
  --_icon: var(--button-outlined-destructive-icon-default);
  --_bg-hover: var(--button-outlined-destructive-background-hover);
  --_bg-active: var(--button-outlined-destructive-background-active);
}

/* Text — no border, hover/active tint background. Label stays in variant color. */
:host([appearance='text']) {
  --_bg: transparent;
}

:host([appearance='text'][variant='primary']) {
  --_label: var(--button-text-primary-label-default);
  --_label-hover: var(--button-text-primary-label-hover);
  --_label-active: var(--button-text-primary-label-active);
  --_icon: var(--button-text-primary-icon-default);
  --_bg-hover: var(--button-text-primary-background-hover);
  --_bg-active: var(--button-text-primary-background-active);
}

:host([appearance='text'][variant='strict']) {
  --_label: var(--button-text-strict-label-default);
  --_icon: var(--button-text-strict-icon-default);
  --_bg-hover: var(--button-text-strict-background-hover);
  --_bg-active: var(--button-text-strict-background-active);
}

:host([appearance='text'][variant='destructive']) {
  --_label: var(--button-text-destructive-label-default);
  --_icon: var(--button-text-destructive-icon-default);
  --_bg-hover: var(--button-text-destructive-background-hover);
  --_bg-active: var(--button-text-destructive-background-active);
}

/* Invalid combos (appearance != filled + variant in {secondary, neutral}) fall back
   to primary visuals. componentDidLoad emits a console.warn in dev. */
:host([appearance='outlined'][variant='secondary']),
:host([appearance='outlined'][variant='neutral']) {
  --_border-color: var(--button-outlined-primary-border-default);
  --_border-color-hover: var(--button-outlined-primary-border-hover);
  --_border-color-active: var(--button-outlined-primary-border-active);
  --_label: var(--button-outlined-primary-label-default);
  --_label-hover: var(--button-outlined-primary-label-hover);
  --_label-active: var(--button-outlined-primary-label-active);
  --_icon: var(--button-outlined-primary-icon-default);
  --_bg-hover: var(--button-outlined-primary-background-hover);
  --_bg-active: var(--button-outlined-primary-background-active);
}

:host([appearance='text'][variant='secondary']),
:host([appearance='text'][variant='neutral']) {
  --_label: var(--button-text-primary-label-default);
  --_label-hover: var(--button-text-primary-label-hover);
  --_label-active: var(--button-text-primary-label-active);
  --_icon: var(--button-text-primary-icon-default);
  --_bg-hover: var(--button-text-primary-background-hover);
  --_bg-active: var(--button-text-primary-background-active);
}

/* ---------- Internal control (button or anchor) ---------- */

.control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);

  block-size: var(--_height);
  min-inline-size: var(--_min-width);
  max-inline-size: var(--_max-width);
  padding-block: 0;
  padding-inline-start: var(--_padding-inline);
  padding-inline-end: var(--_padding-inline);

  box-sizing: border-box;
  border: var(--_border-width) solid var(--_border-color);
  border-radius: var(--_border-radius);
  background-color: var(--_bg);
  color: var(--_label);

  font-family: var(--button-label-font-family);
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  font-weight: var(--button-label-font-weight);
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color var(--button-container-transition-duration) var(--button-container-transition-timing-function),
    color var(--button-container-transition-duration) var(--button-container-transition-timing-function),
    box-shadow var(--button-container-transition-duration) var(--button-container-transition-timing-function);
}

/* Label — handles ellipsis truncation while keeping icons untruncated */
.label {
  display: inline-flex;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.label:empty {
  display: none;
}

/* Hover / Active — disabled when inert (disabled, fieldset-disabled, or loading) */
:host(:not([disabled]):not([loading]):not(.is-fieldset-disabled)) .control:hover {
  background-color: var(--_bg-hover);
  color: var(--_label-hover);
  border-color: var(--_border-color-hover);
}

:host(:not([disabled]):not([loading]):not(.is-fieldset-disabled)) .control:active {
  background-color: var(--_bg-active);
  color: var(--_label-active);
  border-color: var(--_border-color-active);
}

/* Focus ring — dual halo, same across all variants */
.control:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--focus-ring-width-inner) var(--focus-ring-color-inner),
    0 0 0 calc(var(--focus-ring-width-inner) + var(--focus-ring-width-outer)) var(--focus-ring-color-outer);
}

/* ---------- Asymmetric padding when icons sit on a side ---------- */

:host(.has-badge) .control,
:host(.has-icon-start) .control {
  padding-inline-start: var(--_padding-inline-icon);
}

:host(.has-icon-end) .control {
  padding-inline-end: var(--_padding-inline-icon);
}

/* ---------- Icon-only shape (square container, equal zero padding) ----------
   Driven by the `icon` slot. When that slot has assigned content, the label
   text and icon-start/icon-end slots are suppressed and the control becomes
   square with symmetric 0 padding so the icon centers naturally. */

:host([icon-only]) .control {
  min-inline-size: var(--_height);
  inline-size: var(--_height);
  padding-inline-start: 0;
  padding-inline-end: 0;
}

:host([icon-only]) .label,
:host([icon-only]) ::slotted([slot='icon-start']),
:host([icon-only]) ::slotted([slot='icon-end']) {
  display: none;
}

/* ---------- Full-width ----------
   Stretches the button to fill its container's inline-size. The internal
   control loses its intrinsic min-width and inherits the full host width.
   Designed for use inside mud-button-group (vertical) and narrow forms. */

:host([full-width]) {
  display: flex;
  inline-size: 100%;
}

:host([full-width]) .control {
  inline-size: 100%;
  max-inline-size: none;
}

/* ---------- Disabled ---------- */

:host([disabled]) .control,
:host(.is-fieldset-disabled) .control {
  background-color: var(--button-disabled-background);
  color: var(--button-disabled-label);
  cursor: not-allowed;
  pointer-events: none;
}

/* Outlined disabled — border stays visible (muted), fill transparent. */
:host([disabled][appearance='outlined']) .control,
:host(.is-fieldset-disabled[appearance='outlined']) .control {
  background-color: var(--button-outlined-primary-background-disabled);
  border-color: var(--button-outlined-primary-border-disabled);
  color: var(--button-outlined-primary-label-disabled);
}

/* Text disabled — transparent fill, muted label. */
:host([disabled][appearance='text']) .control,
:host(.is-fieldset-disabled[appearance='text']) .control {
  background-color: var(--button-text-primary-background-disabled);
  color: var(--button-text-primary-label-disabled);
}

/* ---------- Badge (service logomark) ----------
   Figma button-badge-filled (2925:4606): a 24x24 logo before the label. */

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: var(--button-badge-size);
  block-size: var(--button-badge-size);
}

:host(:not(.has-badge)) .badge {
  display: none;
}

/* The logo the `badge` prop draws. An outer rule beats mud-logo's own :host sizing. */
.badge mud-logo {
  display: block;
  inline-size: var(--button-badge-size);
  block-size: var(--button-badge-size);
}

/* `!important` is load-bearing: a ::slotted rule loses to the slotted element's
   own :host styles, and `<mud-logo>` sizes its :host to the SVG's intrinsic
   width. Without it the logo ignores the 24x24 box. */
::slotted([slot='badge']) {
  display: block;
  /* stylelint-disable-next-line declaration-no-important */
  inline-size: var(--button-badge-size) !important;
  /* stylelint-disable-next-line declaration-no-important */
  block-size: var(--button-badge-size) !important;
}

/* Figma 6754:9932: the neutral badge button sits on base.secondary, lighter than
   a plain neutral button. Hover and active are the same. */
:host([variant='neutral'].has-badge) {
  --_bg: var(--button-badge-neutral-background-default);
}

/* Figma 2925:5015: the logo dims to 30%; a multicolour logo takes no disabled colour. */
:host([disabled]) .badge,
:host(.is-fieldset-disabled) .badge {
  opacity: var(--button-badge-disabled-opacity);
}

/* ---------- Loading ---------- */

:host([loading]) .control {
  /* Background unchanged from default. Hide label visually via transparent
     color while preserving the accessible name; aria-busy informs ATs. */
  color: transparent;
  cursor: progress;
  pointer-events: none;
}

/* A multicolour logo ignores `color: transparent`, so the badge is hidden the
   same way while keeping its width. */
:host([loading]) .badge {
  visibility: hidden;
}

.spinner-overlay {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ---------- Slotted icons (mud-icon receives currentColor) ---------- */

::slotted(mud-icon) {
  --icon-color: currentcolor;
  flex-shrink: 0;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .control {
    transition: none;
  }
}

/* ---------- Touch target expansion (coarse pointer) ----------
   On touch devices, extend the hit area on both axes to meet the Figma
   spec minimums (sm → 40px, md/lg → 48px) without changing the visual
   size. The pseudo-element is purely a hit-test extension — it sits
   below sibling content in paint order and inherits click events on
   `.control`. */

@media (pointer: coarse) {
  .control::before {
    content: '';
    position: absolute;
    inset: calc((var(--_height) - var(--_touch-target)) / 2);
  }
}