/* ==========================================================================
   Buttons & button-like controls. Base height/centering live in base.css;
   this file owns fill, border, variants, sizes, states. Values → tokens.css.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background-color: var(--surface-control);
  /* Shared beveled gradient — single source of truth for every button. */
  background-image: var(--gradient-button);
  color: var(--text-strong);
  cursor: pointer;
  max-width: max-content;
  transition: all var(--transition-fast);
  font: normal var(--text-xs) var(--font-ui);
  text-align: center;
}

/* Gradient is opaque, so darken with a filter instead of a background swap. */
.btn:hover,
.btn:focus {
  transform: none;
  text-decoration: none;
  filter: brightness(0.96);
}

.btn:active {
  transform: none;
  text-decoration: none;
  filter: brightness(0.92);
}

/* Button variants — all share the base .btn gradient; variants tweak the border/text only.
   Hover darkening is handled once on .btn (brightness filter). */
.btn-primary {
  border-color: var(--border-muted);
}

.btn-secondary {
  border-color: var(--border-muted);
}

.btn-danger {
  border-color: var(--danger-border);
  color: var(--danger-fg);
}

.btn-success {
  border-color: var(--success-border);
  color: var(--success-fg);
}

/* Outline keeps the retro border but now shares the shared gradient fill. */
.btn-outline {
  /* inherits .btn gradient */
}

/* .btn-default is a legacy alias for the base button. */
.btn-default {
  /* inherits .btn */
}

/* Button sizes */
.btn-medium {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-large {
  padding: var(--space-2) 12px;
  font-size: var(--text-xs);
}

/* Button states */
.btn-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  color: #999;
}

.btn-disabled:hover {
  transform: none;
  filter: none;
}

.btn-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
}

/* ---- ---- ---- ---- Legacy buttons ---- ---- ---- ---- */

.button {
  background-color: var(--surface-control);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  font: var(--text-2xs) var(--font-ui);
  text-align: center;
  background-image: var(--gradient-button);
}

.nextprev {
  background-color: var(--surface-control);
  border: 1px solid var(--border-control);
  color: var(--text-strong);
  font: normal var(--text-2xs) var(--font-ui);
  text-align: center;
  padding: var(--space-1);
  background-image: var(--gradient-button);
}

.np {
  background-color: var(--surface-control);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  font: var(--text-2xs) var(--font-ui);
  text-align: center;
  padding: var(--space-1);
}

/* A link styled as a bare inline button. */
.link-button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: var(--leading-normal);
  font: var(--text-xs) var(--font-ui);
  box-sizing: border-box;
  color: var(--link);
  text-decoration: underline;
}

.link-button:hover {
  color: var(--link-hover);
}