/* Buttons: <button|a class="sv-button sv-button--primary|secondary|ghost|danger [--sm] [--icon]">. */

.sv-button {
  --_bg: var(--sv-color-surface);
  --_fg: var(--sv-color-text);
  --_border: var(--sv-color-border-strong);
  --_bg-hover: var(--sv-color-surface-sunken);
  --_fg-hover: var(--_fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  min-height: var(--sv-control-height);
  margin: 0;
  padding: 0 var(--sv-space-4);
  border: 1px solid var(--_border);
  border-radius: var(--sv-radius-md);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sv-duration-fast) var(--sv-ease), border-color var(--sv-duration-fast) var(--sv-ease), color var(--sv-duration-fast) var(--sv-ease), box-shadow var(--sv-duration-fast) var(--sv-ease);
}
.sv-button:hover {
  background: var(--_bg-hover);
  color: var(--_fg-hover);
  text-decoration: none;
}
.sv-button:active { transform: translateY(1px); }
.sv-button:focus-visible { box-shadow: var(--sv-focus-ring); }
.sv-button .sv-icon { width: 1.125rem; height: 1.125rem; }

.sv-button--primary {
  --_bg: var(--sv-color-primary);
  --_fg: var(--sv-color-on-primary);
  --_border: var(--sv-color-primary);
  --_bg-hover: var(--sv-color-primary-hover);
  box-shadow: var(--sv-shadow-sm);
}
.sv-button--primary:hover { border-color: var(--sv-color-primary-hover); }

.sv-button--secondary {
  box-shadow: var(--sv-shadow-sm);
}

.sv-button--ghost {
  --_bg: transparent;
  --_border: transparent;
  --_fg: var(--sv-color-link);
  --_bg-hover: var(--sv-blue-50);
}

.sv-button--danger {
  --_bg: var(--sv-color-danger);
  --_fg: var(--sv-white);
  --_border: var(--sv-color-danger);
  --_bg-hover: var(--sv-color-danger-hover);
  box-shadow: var(--sv-shadow-sm);
}
.sv-button--danger:hover { border-color: var(--sv-color-danger-hover); }

/* Danger outline: destructive secondary action. */
.sv-button--danger-ghost {
  --_bg: transparent;
  --_border: transparent;
  --_fg: var(--sv-color-danger);
  --_bg-hover: var(--sv-error-bg);
}

.sv-button--sm {
  min-height: var(--sv-control-height-sm);
  padding-inline: var(--sv-space-3);
  font-size: var(--sv-text-sm);
}
.sv-button--lg {
  min-height: 2.75rem;
  padding-inline: var(--sv-space-6);
  font-size: var(--sv-text-md);
}
.sv-button--block { display: flex; width: 100%; }

/* Icon-only button (needs aria-label + title). */
.sv-button--icon {
  width: var(--sv-control-height);
  padding: 0;
}
.sv-button--icon.sv-button--sm { width: var(--sv-control-height-sm); }

/* Disabled: native disabled, or aria-disabled (focusable, shows a reason). */
.sv-button:disabled,
.sv-button[aria-disabled="true"],
.sv-button.is-disabled {
  --_bg: var(--sv-color-surface-sunken);
  --_bg-hover: var(--sv-color-surface-sunken);
  --_fg: var(--sv-gray-600);
  --_border: var(--sv-color-border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.sv-button--ghost:disabled,
.sv-button--ghost[aria-disabled="true"] { --_bg: transparent; --_border: transparent; }

/* Busy: spinner replaces the first icon, text stays. */
.sv-button.is-busy,
.sv-button[aria-busy="true"] { cursor: progress; }
.sv-button.is-busy .sv-icon:first-child,
.sv-button[aria-busy="true"] .sv-icon:first-child { animation: sv-spin 0.8s linear infinite; }

/* Reason text for disabled actions (aria-describedby target). */
.sv-reason {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-xs);
}
.sv-reason .sv-icon { color: var(--sv-warning-fg); }

/* Toolbar / group of buttons. */
.sv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2);
}
.sv-toolbar__spacer { flex: 1 1 auto; }

.sv-button-group {
  display: inline-flex;
  isolation: isolate;
}
.sv-button-group > .sv-button { border-radius: 0; }
.sv-button-group > .sv-button + .sv-button { margin-inline-start: -1px; }
.sv-button-group > .sv-button:first-child { border-start-start-radius: var(--sv-radius-md); border-end-start-radius: var(--sv-radius-md); }
.sv-button-group > .sv-button:last-child { border-start-end-radius: var(--sv-radius-md); border-end-end-radius: var(--sv-radius-md); }
.sv-button-group > .sv-button:focus-visible { z-index: 1; }

/* Text link that looks like a link but is a button. */
.sv-link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sv-color-link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

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