/* Figma Button/Secondary 40000054:125109; Button/Outline 40000054:125209. */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: var(--space-8);
  height: 48px;
  padding: var(--space-12) var(--space-20);
  border: 0;
  border-radius: var(--radius-12);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button-secondary {
  background: var(--background-muted);
}

.button-outline {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.button:is(:hover, :active) {
  background: var(--background-hover);
}

.button:focus-visible {
  outline: 0;
  background: var(--background-muted);
}

.button-outline:focus-visible {
  background: var(--paper);
  box-shadow: none;
}

.button:focus-visible::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-16);
  pointer-events: none;
}

.button:is(:disabled, [aria-disabled="true"]) {
  background: var(--background-muted);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: default;
}

.button[aria-busy="true"] {
  cursor: progress;
}

.button-secondary[aria-busy="true"] {
  background: var(--background-muted);
  color: var(--ink);
}

.button-outline[aria-busy="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.button[aria-busy="true"]::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: url('/icons/button-loading.svg') center / 16px 16px no-repeat;
  animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button[aria-busy="true"]::before {
    animation: none;
  }
}