/* components/buttons: Button, LinkButton and IconButton (ui/core.js), on the design-system tokens.
   Values from DS components/core/Button.jsx and IconButton.jsx; the few literals are the component's own
   (noted where they appear). */

/* ---- Button / LinkButton (DS core/Button.jsx) ---- */
.ae-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  max-width: 100%; height: 36.75px; /* DS Button md: MUI's own medium height */
  padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font: var(--type-body-sm); font-weight: var(--weight-medium); font-size: var(--text-sm);
  white-space: nowrap; text-decoration: none; text-transform: none;
  cursor: pointer; user-select: none; vertical-align: middle;
  transition: var(--transition-control), filter var(--duration-fast) var(--ease-standard);
}
.ae-btn:hover { text-decoration: none; }
.ae-btn--sm { height: var(--control-h-sm); padding: 0 10px; /* DS Button sm padding */ }
.ae-btn--lg { height: var(--control-h-lg); padding: 0 22px; /* DS Button lg padding */ font-size: var(--text-base); }
.ae-btn--full { display: flex; width: 100%; }
.ae-btn__icon, .ae-btn__trail { display: inline-flex; flex-shrink: 0; }
.ae-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* primary: vertical brand gradient, white label (a deliberate DS brand choice; contrast revisited later) */
.ae-btn--primary, .ae-btn--primary:hover, .ae-btn--primary:visited {
  background: linear-gradient(180deg, var(--brand-grad-from) 0%, var(--brand-grad-to) 100%);
  color: #ffffff; /* DS Button primary label */
}
/* secondary: outlined, slate label, lighter glyph; the label colour firms the border on hover */
.ae-btn--secondary, .ae-btn--secondary:visited {
  background: var(--surface-card); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border);
}
.ae-btn--secondary:hover { color: var(--btn-secondary-fg); }
.ae-btn--secondary .ae-btn__icon { color: var(--btn-secondary-icon); }
/* danger: contained error red */
.ae-btn--danger, .ae-btn--danger:hover, .ae-btn--danger:visited { background: var(--surface-danger); color: var(--text-on-danger); }
/* ghost: brand ink, brand-tint field on hover */
.ae-btn--ghost, .ae-btn--ghost:visited { background: transparent; color: var(--text-brand); }
.ae-btn--ghost:hover { color: var(--text-brand); }

.ae-btn--primary:hover, .ae-btn--danger:hover { filter: brightness(0.95); }
.ae-btn--primary:active, .ae-btn--danger:active { filter: brightness(0.92); }
.ae-btn--secondary:hover { border-color: var(--btn-secondary-fg); }
.ae-btn--ghost:hover { background: var(--surface-brand-subtle); }

/* focus: the brand glow, beside the global :focus-visible outline (styles/ds/chrome.css) */
.ae-btn:focus-visible { box-shadow: var(--focus-ring); }

.ae-btn:disabled, .ae-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; }
.ae-btn--secondary:disabled:hover { border-color: var(--btn-secondary-border); }
.ae-btn--ghost:disabled:hover { background: transparent; }
/* busy (loading): the ring replaces the glyph; the button stays legible so it reads as working, not as off */
.ae-btn[aria-busy="true"], .ae-icon-btn[aria-busy="true"] { opacity: 1; cursor: progress; }

/* ---- IconButton (DS core/IconButton.jsx) ---- */
.ae-icon-btn {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--control-h-sm); height: var(--control-h-sm); padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: var(--transition-control);
}
.ae-icon-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.ae-icon-btn--danger:hover { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ae-icon-btn--outlined { border-color: var(--border-default); border-radius: var(--radius-control); background: var(--surface-card); }
.ae-icon-btn--outlined:hover { border-color: var(--border-strong); background: var(--surface-card); }
.ae-icon-btn.is-active, .ae-icon-btn.is-active:hover { color: var(--text-brand); }
.ae-icon-btn:focus-visible { box-shadow: var(--focus-ring); }
.ae-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; background: transparent; color: var(--text-muted); }
.ae-icon-btn--outlined:disabled { background: var(--surface-card); border-color: var(--border-default); }