/* =====================================================
   WPD Cockpit — Buttons
   Wagenborg: pill shape, uppercase, brand red
   ===================================================== */

.wpd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  height: 32px;
  padding: 0 1.25rem;
  border: 2px solid var(--color-brand-1);
  border-radius: var(--border-radius-pill);
  background: var(--color-brand-1);
  color: var(--color-white);
  font-family: var(--fontfamily-title);
  font-size: var(--fontsize-body);
  font-weight: var(--fontweight-title);
  letter-spacing: var(--letterspacing-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter var(--transition-default),
    background var(--transition-default),
    color var(--transition-default),
    border-color var(--transition-default);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

.wpd-button:hover:not(:disabled) {
  filter: brightness(1.1);
  text-decoration: none;
  color: var(--color-white);
}

.wpd-button:active:not(:disabled) {
  filter: brightness(0.9);
}

.wpd-button:disabled,
.wpd-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Ghost variant ---- */
.wpd-button--ghost {
  background: transparent;
  color: var(--color-brand-1);
  border-color: transparent;
}
.wpd-button--ghost:hover:not(:disabled) {
  background: var(--color-brand-1);
  color: var(--color-white);
  border-color: var(--color-brand-1);
  filter: none;
}

/* ---- Secondary (black) ---- */
.wpd-button--secondary {
  background: var(--color-brand-2);
  border-color: var(--color-brand-2);
  color: var(--color-white);
}
.wpd-button--secondary:hover:not(:disabled) {
  background: var(--color-grey-800);
  border-color: var(--color-grey-800);
  filter: none;
  color: var(--color-white);
}

.wpd-button--secondary.wpd-button--ghost {
  background: transparent;
  color: var(--color-brand-2);
}
.wpd-button--secondary.wpd-button--ghost:hover:not(:disabled) {
  background: var(--color-brand-2);
  color: var(--color-white);
  filter: none;
}

/* ---- Danger ---- */
.wpd-button--danger {
  background: var(--color-status-alert);
  border-color: var(--color-status-alert);
  color: var(--color-white);
}
.wpd-button--danger.wpd-button--ghost {
  background: transparent;
  color: var(--color-status-alert);
  border-color: var(--color-status-alert);
}
.wpd-button--danger.wpd-button--ghost:hover:not(:disabled) {
  background: var(--color-status-alert);
  color: var(--color-white);
  filter: none;
}

/* ---- Success ---- */
.wpd-button--success {
  background: var(--color-status-ok);
  border-color: var(--color-status-ok);
  color: var(--color-white);
}

/* ---- Sizes ---- */
.wpd-button--sm {
  font-size: var(--fontsize-small);
  padding: 0.2rem 0.75rem;
}

.wpd-button--lg {
  font-size: var(--fontsize-intro);
  padding: 0.6rem 2rem;
}

.wpd-button--icon-only {
  padding: 0.4rem;
  border-radius: 50%;
  aspect-ratio: 1;
  line-height: 1;
}

.wpd-button--icon-only.wpd-button--sm {
  padding: 0.25rem;
}

/* ---- Full width ---- */
.wpd-button--full {
  width: 100%;
  justify-content: center;
}

/* ---- Light (for dark backgrounds) ---- */
.wpd-button--light {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-brand-2);
}
.wpd-button--light:hover:not(:disabled) {
  filter: brightness(0.94);
  color: var(--color-brand-2);
}

/* ---- Button group ---- */
.wpd-button-group {
  display: inline-flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  align-items: center;
}

.wpd-button-group--vertical {
  flex-direction: column;
  align-items: stretch;
}