/**
 * @file
 * Button component — .ed-btn (+ --primary / --success / --danger / --ghost / --sm).
 *
 * The one source for button styling across features. Token-based only.
 * Depends on `educate_base/tokens`.
 */

.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ed-space-2);
  padding: var(--ed-space-2) var(--ed-space-4);
  border: 1px solid var(--ed-color-border-strong);
  border-radius: var(--ed-radius);
  background: var(--ed-color-surface);
  color: var(--ed-color-text);
  font-family: inherit;
  font-size: var(--ed-font-size-sm);
  font-weight: var(--ed-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--ed-transition),
    border-color var(--ed-transition),
    color var(--ed-transition);
}

.ed-btn:focus-visible {
  outline: none;
  box-shadow: var(--ed-ring);
}

/* A JS-hidden button leaves the page: the attribute selector wins over the
   display above. */
.ed-btn[hidden] {
  display: none;
}

.ed-btn:disabled,
.ed-btn[disabled],
.ed-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* An anchor has no disabled property. pointer-events disables the click. */
.ed-btn[aria-disabled="true"] {
  pointer-events: none;
}

/* CiviCRM's riverlea theme ships unscoped [type="button"] / [type="reset"] /
   [type="submit"] :hover/:focus rules (ext/riverlea/core/css/components/
   _buttons.css) that repaint any typed button with the crm palette wherever
   its stylesheet loads, at (0,2,0) specificity. The element-qualified guard
   and the doubled variant classes below outweigh it, so every state a button
   sits in asserts its own background and color. */
button.ed-btn:hover,
button.ed-btn:focus {
  background: var(--ed-color-surface);
  color: var(--ed-color-text);
}

/* Text color is locked across interactive states so an <a class="ed-btn">
   keeps the button color on hover/focus/visited instead of inheriting the
   theme's link colors (a:hover/a:visited would otherwise win by specificity).
   The Go <button> and a Download <a> then behave identically. */
.ed-btn.ed-btn--primary,
.ed-btn.ed-btn--primary:hover,
.ed-btn.ed-btn--primary:focus,
.ed-btn.ed-btn--primary:visited {
  color: var(--ed-color-text-on-brand);
}

.ed-btn.ed-btn--primary,
.ed-btn.ed-btn--primary:focus {
  border-color: var(--ed-color-brand);
  background: var(--ed-color-brand);
}

.ed-btn.ed-btn--primary:hover {
  border-color: var(--ed-color-brand-dark);
  background: var(--ed-color-brand-dark);
}

.ed-btn.ed-btn--success,
.ed-btn.ed-btn--success:hover,
.ed-btn.ed-btn--success:focus,
.ed-btn.ed-btn--success:visited {
  color: var(--ed-color-text-on-brand);
}

.ed-btn.ed-btn--success,
.ed-btn.ed-btn--success:hover,
.ed-btn.ed-btn--success:focus {
  border-color: var(--ed-color-success);
  background: var(--ed-color-success);
}

.ed-btn.ed-btn--danger,
.ed-btn.ed-btn--danger:hover,
.ed-btn.ed-btn--danger:focus,
.ed-btn.ed-btn--danger:visited {
  color: var(--ed-color-text-on-brand);
}

.ed-btn.ed-btn--danger,
.ed-btn.ed-btn--danger:focus {
  border-color: var(--ed-color-danger);
  background: var(--ed-color-danger);
}

.ed-btn.ed-btn--danger:hover {
  border-color: var(--ed-color-danger-strong);
  background: var(--ed-color-danger-strong);
}

.ed-btn.ed-btn--ghost,
.ed-btn.ed-btn--ghost:hover,
.ed-btn.ed-btn--ghost:focus,
.ed-btn.ed-btn--ghost:visited {
  color: var(--ed-color-text);
}

.ed-btn.ed-btn--ghost,
.ed-btn.ed-btn--ghost:focus {
  border-color: var(--ed-color-border-strong);
  background: var(--ed-color-surface);
}

.ed-btn.ed-btn--ghost:hover {
  background: var(--ed-color-surface-sunken);
}

.ed-btn--sm {
  gap: var(--ed-space-1);
  padding: var(--ed-space-1) var(--ed-space-3);
}