.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-inline: var(--control-padding-inline);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.button[hidden] {
  display: none;
}

@media (hover: hover) {
  .button:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--color-surface-hover);
  }
}

.button--primary {
  border-color: var(--color-accent-fill);
  background-color: var(--color-accent-fill);
  color: var(--color-text);
}

@media (hover: hover) {
  .button--primary:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in oklab, var(--color-accent-fill) 78%, var(--color-accent));
    border-color: color-mix(in oklab, var(--color-accent-fill) 78%, var(--color-accent));
  }
}

.button--danger {
  border-color: transparent;
  background-color: var(--color-negative-soft);
  color: var(--color-negative);
}

@media (hover: hover) {
  .button--danger:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: color-mix(in oklab, var(--color-negative-soft) 92%, var(--color-negative));
  }
}

.button--ghost {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .button--ghost:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--color-text);
  }
}

.button--small {
  min-block-size: var(--control-block-size-compact);
}

.button--icon-only {
  padding-inline: var(--space-xs);
  inline-size: var(--control-block-size);
}

.button--small.button--icon-only {
  inline-size: var(--control-block-size-compact);
  border-radius: var(--radius-md);
}

.button--block {
  inline-size: 100%;
}

.button--entering {
  animation: button-enter var(--duration-enter) var(--easing-enter);
}

@keyframes button-enter {
  from {
    opacity: 0;
    translate: 0 var(--space-sm);
  }
}

.button:disabled:not([aria-busy="true"]),
.button[aria-disabled="true"] {
  border-color: var(--color-border);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-disabled);
  cursor: default;
}

.button--ghost:disabled:not([aria-busy="true"]),
.button--ghost[aria-disabled="true"] {
  border-color: transparent;
  background-color: transparent;
}

.button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
  animation: button-busy var(--duration-pulse) var(--easing-state) infinite;
}

@keyframes button-busy {
  50% {
    opacity: 0.35;
  }
}

@media (forced-colors: active) {
  .button:disabled:not([aria-busy="true"]),
  .button[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }
}

@media (pointer: coarse) {
  .button {
    display: flex;
  }
}