:root {
  --button-primary-background: var(--color-primary);
  --button-primary-foreground: var(--color-primary-foreground);
  --button-primary-hover-background: var(--color-primary-hover);
  --button-primary-hover-foreground: var(--color-primary-hover-foreground);
  --button-primary-pressed-background: var(--color-primary-pressed);
  --button-primary-pressed-foreground: var(--color-primary-pressed-foreground);
  --button-outline-background: var(--color-surface);
  --button-outline-foreground: var(--color-surface-foreground);
  --button-outline-border-color: var(--color-border-strong);
  --button-outline-border: var(--control-border-width) solid var(--button-outline-border-color);
  --button-outline-hover-background: var(--color-neutral-hover);
  --button-outline-hover-foreground: var(--color-foreground);
  --button-secondary-background: var(--color-secondary);
  --button-secondary-foreground: var(--color-secondary-foreground);
  --button-secondary-hover-background: var(--color-secondary-hover);
  --button-secondary-hover-foreground: var(--color-secondary-hover-foreground);
  --button-ghost-background: var(--color-clear);
  --button-ghost-foreground: var(--color-foreground);
  --button-ghost-hover-background: var(--color-accent);
  --button-ghost-hover-foreground: var(--color-accent-foreground);
  --button-destructive-background: var(--color-surface);
  --button-destructive-foreground: var(--color-destructive);
  --button-destructive-border-color: var(--color-destructive);
  --button-destructive-border: var(--control-border-width) solid var(--button-destructive-border-color);
  --button-destructive-hover-background: var(--color-destructive-hover);
  --button-destructive-hover-foreground: var(--color-destructive-hover-foreground);
  --button-borderless-color: var(--color-clear);
  --button-disabled-border: var(--control-border-width) solid var(--color-disabled-border);

  --button-circular-background: var(--color-clear);
  --button-circular-foreground: var(--color-foreground);
  --button-circular-chip-background: var(--color-surface);
  --button-circular-chip-hover-background: var(--color-accent);
  --button-circular-chip-border-color: var(--color-border-strong);
  --button-circular-chip-border: var(--control-border-width) solid var(--button-circular-chip-border-color);
  --button-circular-chip-size: var(--size-24);
  --button-circular-radius: var(--radius-full);
  --button-circular-focus-offset: var(--border-2);

  --button-background: var(--button-primary-background);
  --button-foreground: var(--button-primary-foreground);
  --button-border: var(--control-border-width) solid var(--button-borderless-color);
  --button-focus-color: var(--color-focus-ring);
  --button-focus-outline: var(--focus-width) solid var(--button-focus-color);
  --button-hover-background: var(--button-primary-hover-background);
  --button-hover-foreground: var(--button-primary-hover-foreground);
  --button-pressed-offset: var(--border-1);
  --button-pressed-transform: translateY(var(--button-pressed-offset));
  --button-padding-block: var(--space-2);
  --button-padding-inline: var(--space-4);
  --button-padding: var(--button-padding-block) var(--button-padding-inline);
  --button-gap: var(--space-2);
  --button-font: var(--font-type-label);
}

/* Resolve hover aliases per instance, so each variant owns its pressed state. */
.button-control {
  --button-pressed-background: var(--button-hover-background);
  --button-pressed-foreground: var(--button-hover-foreground);
}
.button-control--primary {
  --button-pressed-background: var(--button-primary-pressed-background);
  --button-pressed-foreground: var(--button-primary-pressed-foreground);
}

.button-control--outline {
  --button-background: var(--button-outline-background);
  --button-foreground: var(--button-outline-foreground);
  --button-border: var(--button-outline-border);
  --button-hover-background: var(--button-outline-hover-background);
  --button-hover-foreground: var(--button-outline-hover-foreground);
}

.button-control--secondary {
  --button-background: var(--button-secondary-background);
  --button-foreground: var(--button-secondary-foreground);
  --button-hover-background: var(--button-secondary-hover-background);
  --button-hover-foreground: var(--button-secondary-hover-foreground);
}

.button-control--ghost {
  --button-background: var(--button-ghost-background);
  --button-foreground: var(--button-ghost-foreground);
  --button-hover-background: var(--button-ghost-hover-background);
  --button-hover-foreground: var(--button-ghost-hover-foreground);
}

.button-control--destructive {
  --button-background: var(--button-destructive-background);
  --button-foreground: var(--button-destructive-foreground);
  --button-border: var(--button-destructive-border);
  --button-hover-background: var(--button-destructive-hover-background);
  --button-hover-foreground: var(--button-destructive-hover-foreground);
}

.button-control--circular {
  --button-background: var(--button-circular-background);
  --button-hover-background: var(--button-circular-background);
  --button-foreground: var(--button-circular-foreground);
  --button-hover-foreground: var(--button-circular-foreground);
}

.button-control {
  box-sizing: border-box;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: var(--button-gap);
  min-block-size: var(--control-target-size);
  max-inline-size: 100%;
  margin: 0;
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--control-radius);
  background: var(--button-background);
  color: var(--button-foreground);
  font: var(--button-font);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  white-space: normal;
  cursor: pointer;
}

.button-control:hover:not(:disabled) {
  background: var(--button-hover-background);
  color: var(--button-hover-foreground);
}

.button-control:active:not(:disabled) {
  background: var(--button-pressed-background);
  color: var(--button-pressed-foreground);
  transform: var(--button-pressed-transform);
}

.button-control:focus-visible {
  outline: var(--button-focus-outline);
  outline-offset: var(--focus-offset);
}

.button-control:disabled {
  background: var(--color-disabled);
  color: var(--color-disabled-foreground);
  border: var(--button-disabled-border);
  cursor: not-allowed;
}

/* Reuse loading.css's spinner without depending on request feedback.
   Keep the label in layout and the accessibility tree while busy. */
.button-control[aria-busy="true"] { position: relative; cursor: wait; color: var(--color-clear); }
.button-control[aria-busy="true"] > * { opacity: var(--opacity-0); }
.button-control[aria-busy="true"]::after { position: absolute; color: var(--color-disabled-foreground); }

.button-control--icon {
  inline-size: var(--control-target-size);
  block-size: var(--control-target-size);
  padding: 0;
}

.button-control__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.button-control__icon svg {
  display: block;
}

/* A small visible chip inside the unchanged 44px native button target. */
.button-control--circular .button-control__icon {
  box-sizing: border-box;
  inline-size: var(--button-circular-chip-size);
  block-size: var(--button-circular-chip-size);
  border: var(--button-circular-chip-border);
  border-radius: var(--button-circular-radius);
  background: var(--button-circular-chip-background);
}

.button-control--circular:hover:not(:disabled) .button-control__icon {
  background: var(--button-circular-chip-hover-background);
}

.button-control--circular:disabled {
  background: var(--button-circular-background);
  border-color: var(--button-borderless-color);
}
.button-control--circular:disabled .button-control__icon {
  background: var(--color-disabled);
  border: var(--button-disabled-border);
}

.button-control--circular:focus-visible {
  outline: none;
}

.button-control--circular:focus-visible .button-control__icon {
  outline: var(--button-focus-outline);
  outline-offset: var(--button-circular-focus-offset);
}