/*
 * sd-button — buttons and CTA variants (core sample Session 2.2; complete set Session 2.3)
 * Variants: primary, secondary (outline), tertiary (text), on-brand (inside .sd-section--brand),
 *           with icon, large (main CTA of a section), block (full width below 640px), icon button (sd-icon-button)
 * States: default, hover, focus-visible, active, disabled, loading (aria-busy)
 * CTA names: only the approved names (Blueprint 10.24); one primary action per section (10.25).
 * Rules: precise radius, no pill; copper is never a button fill (Design_System_Plan.md 5.5, 6.3); 44px minimum target.
 */

.sd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-2);
  min-height: 3rem;                /* 48 — above the 44px minimum */
  min-width: var(--sd-target-min);
  padding: 0.75rem var(--sd-space-4);
  border: var(--sd-border-width-strong) solid transparent;
  border-radius: var(--sd-radius-md);
  background: transparent;
  color: var(--sd-color-action-primary);
  font-family: inherit;
  font-size: var(--sd-font-size-ui);
  font-weight: var(--sd-font-weight-medium);
  line-height: var(--sd-line-height-ui);
  letter-spacing: var(--sd-letter-spacing-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--sd-transition-feedback),
    border-color var(--sd-transition-feedback),
    color var(--sd-transition-feedback);
}

.sd-button__icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Primary */
.sd-button--primary {
  background: var(--sd-color-action-primary);
  border-color: var(--sd-color-action-primary);
  color: var(--sd-color-action-primary-text);
}

.sd-button--primary:hover {
  background: var(--sd-color-action-primary-hover);
  border-color: var(--sd-color-action-primary-hover);
  color: var(--sd-color-action-primary-text);
}

.sd-button--primary:active {
  background: var(--sd-color-action-primary-active);
  border-color: var(--sd-color-action-primary-active);
}

/* Secondary (outline) */
.sd-button--secondary {
  border-color: var(--sd-color-action-primary);
  color: var(--sd-color-action-primary);
}

.sd-button--secondary:hover { background: var(--sd-color-action-secondary-hover-bg); color: var(--sd-color-action-primary); }
.sd-button--secondary:active { background: var(--sd-color-action-secondary-active-bg); }

/* Tertiary (text) */
.sd-button--tertiary {
  padding-inline: var(--sd-space-2);
  color: var(--sd-color-action-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.sd-button--tertiary:hover { text-decoration-thickness: 2px; color: var(--sd-color-action-primary-hover); }
.sd-button--tertiary:active { color: var(--sd-color-action-primary-active); }

/* On the blue band: white primary with blue text; white outline secondary */
.sd-section--brand .sd-button--primary,
.sd-button--on-brand.sd-button--primary {
  background: var(--sd-color-white);
  border-color: var(--sd-color-white);
  color: var(--sd-color-brand-blue);
}

.sd-section--brand .sd-button--primary:not(:disabled):hover,
.sd-button--on-brand.sd-button--primary:not(:disabled):hover {
  background: var(--sd-color-blue-050);
  border-color: var(--sd-color-blue-050);
  color: var(--sd-color-brand-blue);
}

.sd-section--brand .sd-button--secondary,
.sd-button--on-brand.sd-button--secondary {
  border-color: var(--sd-color-white);
  color: var(--sd-color-white);
}

.sd-section--brand .sd-button--secondary:not(:disabled):hover,
.sd-button--on-brand.sd-button--secondary:not(:disabled):hover {
  background: rgb(255 255 255 / 0.12);
  color: var(--sd-color-white);
}

/* Tertiary on the blue band */
.sd-section--brand .sd-button--tertiary,
.sd-section--brand .sd-button--tertiary:hover,
.sd-section--brand .sd-button--tertiary:active { color: var(--sd-color-white); }

/* Disabled: no hover, explicit semantics (aria-disabled for links) */
.sd-button:disabled,
.sd-button[aria-disabled="true"] {
  background: var(--sd-color-surface-disabled);
  border-color: var(--sd-color-surface-disabled);
  color: var(--sd-color-text-disabled);
  cursor: not-allowed;
  text-decoration: none;
}

.sd-button--tertiary:disabled,
.sd-button--tertiary[aria-disabled="true"] {
  background: transparent;
  border-color: transparent;
}

/* Large: the main CTA of a hero or CTA panel */
.sd-button--lg {
  min-height: 3.5rem;              /* 56 */
  padding-inline: var(--sd-space-5);
  font-size: var(--sd-font-size-body);
}

/* Block: full width on phones (stacked CTA pairs) */
@media (max-width: 639.98px) {
  .sd-button--block { width: 100%; }
}

/* Icon after the label moves on hover (arrow = "go forward") */
.sd-button__icon { transition: transform var(--sd-transition-ui); }
.sd-button:not(:disabled):not([aria-disabled="true"]):hover .sd-button__icon--forward { transform: translateX(0.2em); }

/* Group of actions: primary first, then secondary; wraps and keeps 8px+ between targets */
.sd-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-space-3);
}

/* Loading: label changes to a progress text ("Sending…"), spinner is decorative.
   Not the Blue Line (Blueprint 8.27). Reduced motion: spinner static (base.css). */
.sd-button[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.sd-button__spinner {
  display: none;
  width: 1.125em;
  height: 1.125em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sd-spin 800ms linear infinite;
}

.sd-button[aria-busy="true"] .sd-button__spinner { display: inline-block; }
.sd-button[aria-busy="true"] .sd-button__icon { display: none; }

.sd-button--primary[aria-busy="true"] {
  background: var(--sd-color-action-primary-hover);
  border-color: var(--sd-color-action-primary-hover);
}

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

/* Icon button (account, menu, close, gallery controls) — 44 × 44, always with an accessible name */
.sd-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sd-target-min);
  height: var(--sd-target-min);
  padding: 0;
  border: var(--sd-border-width) solid transparent;
  border-radius: var(--sd-radius-md);
  background: transparent;
  color: var(--sd-color-brand-blue);
  cursor: pointer;
  transition: background-color var(--sd-transition-feedback), border-color var(--sd-transition-feedback);
}

.sd-icon-button svg { width: 1.5rem; height: 1.5rem; }
.sd-icon-button:hover,
.sd-icon-button[data-state="hover"] { background: var(--sd-color-blue-050); }
.sd-icon-button:active,
.sd-icon-button[data-state="active"] { background: var(--sd-color-blue-100); }
.sd-icon-button--outline { border-color: var(--sd-color-border-control); }
.sd-icon-button:disabled {
  color: var(--sd-color-text-disabled);
  background: transparent;
  cursor: not-allowed;
}

/* Review only: show a state statically (data-state="hover|active|focus") */
.sd-button--primary[data-state="hover"] { background: var(--sd-color-action-primary-hover); border-color: var(--sd-color-action-primary-hover); }
.sd-button--primary[data-state="active"] { background: var(--sd-color-action-primary-active); border-color: var(--sd-color-action-primary-active); }
.sd-button--secondary[data-state="hover"] { background: var(--sd-color-action-secondary-hover-bg); }
.sd-button--secondary[data-state="active"] { background: var(--sd-color-action-secondary-active-bg); }
.sd-button--tertiary[data-state="hover"] { text-decoration-thickness: 2px; color: var(--sd-color-action-primary-hover); }
.sd-button[data-state="focus"] { outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color); outline-offset: var(--sd-focus-ring-offset); }