.button {
  --tone-fill: var(--background-inverse-primary);
  --tone-fill-pressed: var(--background-inverse-primary);
  --tone-on-fill: var(--content-inverse-primary);
  --tone-wash: var(--background-transparent-subtle);
  --tone-wash-pressed: var(--background-transparent);
  --tone-wash-edge: var(--stroke-xsmall);
  --tone-ink: var(--content-primary);
  --tone-edge: var(--border-transparent);
  --tone-edge-width: var(--stroke-small);
  --tone-outline-hover: var(--background-transparent-subtle);

  --button-fill: var(--tone-fill);
  --button-fill-hover: var(--tone-fill-pressed);
  --button-ink: var(--tone-on-fill);
  --button-edge: transparent;
  --button-edge-width: var(--stroke-small);

  --button-height: 48px;
  --button-pad: var(--spacing-medium);
  --button-gap: var(--spacing-xsmall);
  --button-radius: var(--radius-medium);
  --button-icon: var(--icon-large);
  --button-text: var(--text-callout-medium);
  --button-tracking: var(--text-callout-medium-tracking);

  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  height: var(--button-height);
  padding: 0 var(--button-pad);
  border: var(--button-edge-width) solid var(--button-edge);
  border-radius: var(--button-radius);
  background: var(--button-fill);
  color: var(--button-ink);
  font: var(--button-text);
  letter-spacing: var(--button-tracking);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button svg {
  flex: none;
  width: var(--button-icon);
  height: var(--button-icon);
}

.button[data-type="negative"] {
  --tone-fill: var(--background-extension-negative);
  --tone-fill-pressed: var(--background-extension-negative-pressed);
  --tone-wash: var(--background-extension-negative-transparent);
  --tone-wash-pressed: var(--background-extension-negative-transparent-pressed);
  --tone-ink: var(--content-extension-negative);
  --tone-edge: var(--border-extension-negative-transparent);
  --tone-outline-hover: var(--background-extension-negative-transparent);
}

.button[data-type="accent"] {
  --tone-fill: var(--background-extension-accent);
  --tone-fill-pressed: var(--background-extension-accent-pressed);
  --tone-wash: var(--background-extension-accent-transparent);
  --tone-wash-pressed: var(--background-extension-accent-transparent-pressed);
  --tone-ink: var(--content-extension-accent);
  --tone-edge: var(--border-extension-accent-transparent);
  --tone-outline-hover: transparent;
}

.button[data-type="success"] {
  --tone-fill: var(--background-extension-positive);
  --tone-fill-pressed: var(--background-extension-positive-pressed);
  --tone-wash: var(--background-extension-positive-transparent);
  --tone-wash-pressed: var(--background-extension-positive-transparent-pressed);
  --tone-ink: var(--content-extension-positive);
  --tone-edge: var(--border-extension-positive-transparent);
  --tone-outline-hover: transparent;
}

.button[data-type="warning"] {
  --tone-fill: var(--background-extension-warning);
  --tone-fill-pressed: var(--background-extension-warning-pressed);
  --tone-wash: var(--background-extension-warning-transparent);
  --tone-wash-pressed: var(--background-extension-warning-transparent-pressed);
  --tone-ink: var(--content-extension-warning);
  --tone-edge: var(--border-extension-warning-transparent);
  --tone-outline-hover: transparent;
}

.button[data-type] {
  --tone-on-fill: var(--content-primary);
  --tone-wash-edge: 0px;
  --tone-edge-width: var(--stroke-xsmall);
}

.button[data-hierarchy="secondary"] {
  --button-fill: var(--tone-wash);
  --button-fill-hover: var(--tone-wash-pressed);
  --button-ink: var(--tone-ink);
  --button-edge: var(--tone-edge);
  --button-edge-width: var(--tone-wash-edge);
}

.button[data-hierarchy="tertiary"] {
  --button-fill: transparent;
  --button-fill-hover: var(--tone-outline-hover);
  --button-ink: var(--tone-ink);
  --button-edge: var(--tone-edge);
  --button-edge-width: var(--tone-edge-width);
}

.button[data-size="large"] {
  --button-height: 56px;
  --button-text: var(--text-body-medium);
  --button-tracking: var(--text-body-medium-tracking);
}

.button[data-size="small"] {
  --button-height: 40px;
  --button-gap: var(--spacing-xxsmall);
  --button-icon: var(--icon-medium);
  --button-text: var(--text-subheadline-medium);
  --button-tracking: var(--text-subheadline-medium-tracking);
}

.button[data-size="xsmall"] {
  --button-height: 34px;
  --button-pad: var(--spacing-small);
  --button-gap: var(--spacing-xxxsmall);
  --button-radius: var(--radius-small);
  --button-icon: var(--icon-small);
  --button-text: var(--text-subheadline-medium);
  --button-tracking: var(--text-subheadline-medium-tracking);
}

@media (hover: hover) {
  .button:hover { background: var(--button-fill-hover); }
}