.button {
  --button-fill: var(--tone-solid);
  --button-fill-hover: var(--tone-solid-hover);
  --button-fill-pressed: var(--tone-solid-pressed);
  --button-content: var(--tone-on-solid);
  --button-height: var(--control-medium);
  --button-padding: var(--padding-large);
  --button-gap: var(--spacing-xsmall);
  --button-radius: var(--radius-medium);
  --button-icon: var(--icon-large);
  --button-text: var(--text-body-medium);
  --button-text-tracking: var(--text-body-medium-tracking);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  height: var(--button-height);
  padding: 0 var(--button-padding);
  border: 0;
  border-radius: var(--button-radius);
  background: var(--button-fill);
  color: var(--button-content);
  font: var(--button-text);
  letter-spacing: var(--button-text-tracking);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-glide), color var(--duration-hover) var(--ease-glide);
}

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

.button:active {
  background: var(--button-fill-pressed);
}

.button [data-icon]:not([data-icon-size]) {
  width: var(--button-icon);
  height: var(--button-icon);
}

.button[data-hierarchy="secondary"] {
  --button-fill: var(--tone-soft);
  --button-fill-hover: var(--tone-soft-hover);
  --button-fill-pressed: var(--tone-soft-pressed);
  --button-content: var(--tone-content);
}

.button[data-hierarchy="tertiary"] {
  --button-fill: transparent;
  --button-fill-hover: var(--tone-soft);
  --button-fill-pressed: var(--tone-soft-hover);
  --button-content: var(--tone-content);
}

.button[data-size="large"] {
  --button-height: var(--control-large);
}

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

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

.button:disabled,
.button[aria-disabled="true"] {
  --button-fill: var(--tone-disabled);
  --button-fill-hover: var(--tone-disabled);
  --button-fill-pressed: var(--tone-disabled);
  --button-content: var(--tone-content-disabled);
  cursor: not-allowed;
}

.button[data-hierarchy="tertiary"]:disabled,
.button[data-hierarchy="tertiary"][aria-disabled="true"] {
  --button-fill: transparent;
  --button-fill-hover: transparent;
  --button-fill-pressed: transparent;
}

.button[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
}

.button[aria-busy="true"] > * {
  opacity: 0;
}

.button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--button-icon);
  height: var(--button-icon);
  margin: auto;
  border: var(--stroke-large) solid var(--button-content);
  border-right-color: transparent;
  border-radius: var(--radius-max);
  animation: button-spin var(--duration-spin) linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(1turn);
  }
}