/* ============================================================
   Button component — Qiscus DS 2026
   6 variants: primary, secondary, destructive, ghost, link, icon
   3 sizes: sm (28h) · md (36h) · lg (44h)
   ============================================================ */

.ds-btn {
  --btn-h: 36px;
  --btn-pad-x: var(--space-sm);
  --btn-pad-y: var(--space-2xs);
  --btn-radius: var(--radius-sm);
  --btn-font-size: 14px;
  --btn-font-lh: 20px;
  --btn-icon-size: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: var(--border-xs) solid transparent;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--btn-font-size);
  line-height: var(--btn-font-lh);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: transparent;
  color: inherit;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  text-decoration: none;
}
.ds-btn:focus-visible {
  outline: var(--border-sm) solid var(--border-focus-ring);
  outline-offset: 2px;
}
.ds-btn[aria-disabled="true"],
.ds-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.ds-btn[aria-busy="true"] {
  cursor: progress;
  opacity: var(--opacity-60);
}

/* ---------- Sizes ---------- */
.ds-btn--sm {
  height: 28px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: 12px;
  line-height: 16px;
}
.ds-btn--sm .ds-btn__icon svg,
.ds-btn--sm .ds-btn__spinner { width: 16px; height: 16px; }

.ds-btn--md {
  height: 36px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
}

.ds-btn--lg {
  height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- Icon ---------- */
.ds-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.ds-btn__icon svg { width: var(--btn-icon-size); height: var(--btn-icon-size); stroke-width: 1.5; display: block; }

/* ---------- Icon-only ---------- */
.ds-btn--icon { padding: 0; width: auto; aspect-ratio: 1; gap: 0; }

/* ---------- Variant: Primary ---------- */
.ds-btn--primary { background: var(--bg-brand-secondary); color: var(--text-on-brand); }
.ds-btn--primary:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--bg-brand-hover); }
.ds-btn--primary:active:not([aria-disabled="true"]):not(:disabled) { background: var(--bg-brand-active); }
.ds-btn--primary[aria-disabled="true"],
.ds-btn--primary:disabled { background: var(--bg-disabled); color: var(--text-disabled); }

/* ---------- Variant: Secondary ---------- */
.ds-btn--secondary { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-secondary); }
.ds-btn--secondary:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--bg-secondary); border-color: var(--border-tertiary); }
.ds-btn--secondary:active:not([aria-disabled="true"]):not(:disabled) { background: var(--bg-tertiary); }
.ds-btn--secondary[aria-disabled="true"],
.ds-btn--secondary:disabled { background: var(--bg-disabled); color: var(--text-disabled); border-color: var(--border-disabled); }

/* ---------- Variant: Destructive ---------- */
.ds-btn--destructive { background: var(--bg-primary); color: var(--text-error-primary); border-color: var(--border-error-subtle); }
.ds-btn--destructive:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--bg-error-primary); border-color: var(--border-error-primary); }
.ds-btn--destructive:active:not([aria-disabled="true"]):not(:disabled) { background: var(--bg-error-primary); color: var(--text-error-secondary); border-color: var(--border-error-secondary); }
.ds-btn--destructive[aria-disabled="true"],
.ds-btn--destructive:disabled { background: var(--bg-disabled); color: var(--text-disabled); border-color: var(--border-disabled); }

/* ---------- Variant: Ghost ---------- */
.ds-btn--ghost { background: transparent; color: var(--icon-brand-primary); }
.ds-btn--ghost:hover:not([aria-disabled="true"]):not(:disabled) { background: transparent; color: var(--bg-brand-hover); }
.ds-btn--ghost:active:not([aria-disabled="true"]):not(:disabled) { background: transparent; color: var(--bg-brand-active); }
.ds-btn--ghost[aria-disabled="true"],
.ds-btn--ghost:disabled { color: var(--text-disabled); background: transparent; }

/* ---------- Variant: Link ---------- */
.ds-btn--link { background: transparent; color: var(--text-link); padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.ds-btn--link:hover:not([aria-disabled="true"]):not(:disabled) { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }
.ds-btn--link:active:not([aria-disabled="true"]):not(:disabled) { color: var(--text-link-active); }
.ds-btn--link[aria-disabled="true"],
.ds-btn--link:disabled { color: var(--text-disabled); }

/* ---------- Loading spinner ---------- */
.ds-btn__spinner {
  display: inline-block;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: ds-btn-spin 1s linear infinite;
}
@keyframes ds-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ds-btn__spinner { animation: none; }
  .ds-btn { transition: none; }
}