.button {
  --button-background: transparent;
  --button-background-hover: transparent;
  --button-background-active: transparent;
  --button-border: transparent;
  --button-foreground: var(--color-text-primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--touch-target-size);
  border: var(--control-border-width) solid var(--button-border);
  border-radius: var(--radius-md);
  background: var(--button-background);
  color: var(--button-foreground);
  font-weight: var(--font-weight-control);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-standard), border-color var(--duration-standard), color var(--duration-standard), transform var(--duration-standard);
}

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

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

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

.button:disabled {
  opacity: var(--control-disabled-opacity);
  cursor: default;
}

.button--primary {
  --button-background: var(--color-control-primary);
  --button-background-hover: var(--color-control-primary-hover);
  --button-background-active: var(--color-control-primary-active);
  --button-foreground: var(--color-control-on-primary);
}

.button--secondary {
  --button-background: var(--color-control-secondary);
  --button-background-hover: var(--color-control-secondary-hover);
  --button-background-active: var(--color-control-secondary-active);
  --button-border: var(--color-border);
}

.button--tertiary {
  --button-background-hover: var(--color-control-tertiary-hover);
  --button-background-active: var(--color-control-tertiary-active);
  --button-foreground: var(--color-control-primary);
}

.button--danger {
  --button-background: var(--color-control-danger);
  --button-background-hover: var(--color-control-danger-hover);
  --button-background-active: var(--color-control-danger-active);
  --button-foreground: var(--color-control-on-danger);
}

.button--compact {
  min-height: var(--control-height-compact);
  padding-inline: var(--control-padding-compact);
  font-size: var(--font-size-control-sm);
}

.button--small {
  min-height: var(--control-height-sm);
  padding-inline: var(--control-padding-sm);
  font-size: var(--font-size-control-sm);
}

.button--medium {
  min-height: var(--control-height-md);
  padding-inline: var(--control-padding-md);
  font-size: var(--font-size-control-md);
}

.button--large {
  min-height: var(--control-height-lg);
  padding-inline: var(--control-padding-lg);
  font-size: var(--font-size-control-lg);
}

.button--full-width {
  width: 100%;
}

.button__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
}

.button__icon {
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
}

.button__spinner {
  position: absolute;
  display: none;
  width: var(--loading-indicator-size);
  height: var(--loading-indicator-size);
  border: var(--loading-indicator-width) solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-loading var(--duration-loading) linear infinite;
}

.button[data-loading='true'] .button__content {
  visibility: hidden;
}

.button[data-loading='true'] .button__spinner {
  display: block;
}

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