.button {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--easing-productive),
    border-color var(--duration-fast) var(--easing-productive),
    color var(--duration-fast) var(--easing-productive),
    transform var(--duration-fast) var(--easing-productive);
}
.button:active:not(:disabled) {
  transform: translateY(1px);
}
.button:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.small {
  min-block-size: 2.5rem;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--type-label-size);
}
.medium {
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
}
.large {
  min-block-size: 3.25rem;
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  font-size: var(--type-body-large-size);
}
.primary {
  background: var(--interactive-primary);
  color: var(--text-inverse);
}
.primary:hover:not(:disabled) {
  background: var(--interactive-primary-hover);
}
.conversion {
  background: var(--interactive-conversion);
  color: var(--text-inverse);
}
.conversion:hover:not(:disabled) {
  background: var(--interactive-conversion-hover);
}
.secondary {
  border-color: var(--interactive-primary);
  background: var(--surface-primary);
  color: var(--interactive-primary);
}
.secondary:hover:not(:disabled) {
  background: var(--status-info-surface);
}
.tertiary {
  border-color: var(--border-standard);
  background: var(--surface-elevated);
  color: var(--text-primary);
}
.tertiary:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.ghost {
  background: transparent;
  color: var(--text-primary);
}
.ghost:hover:not(:disabled) {
  background: var(--surface-muted);
}
.destructive {
  background: var(--interactive-danger);
  color: var(--text-inverse);
}
.destructive:hover:not(:disabled) {
  filter: brightness(0.92);
}
.link {
  min-block-size: 2.75rem;
  padding-inline: 0;
  background: transparent;
  color: var(--link-default);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.link:hover:not(:disabled) {
  color: var(--link-hover);
}
.iconOnly {
  aspect-ratio: 1;
  padding: var(--space-3);
}
.fullWidth {
  inline-size: 100%;
}
.loading {
  position: relative;
}
.spinner {
  position: absolute;
  animation: spin 0.9s linear infinite;
}
.loadingContent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
}
.label {
  min-inline-size: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .spinner {
    animation-duration: 1.8s;
  }
}
@media (forced-colors: active) {
  .button {
    border-color: ButtonText;
  }
}
