/*
 * Shared component styles for app/views/components/_button.html.erb.
 *
 * The partial no longer emits data-component="button": that attribute is maquina's
 * hook, and carrying it meant the gem's unlayered CSS dressed every payroll button,
 * which is what the [data-component="button"] overrides in the Tailwind entry exist
 * to undo. Owning the classes removes both sides of that fight. The overrides stay
 * for the one caller still on the gem — combobox/_trigger — until PRL-1424 lands.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: 26px; /* no line-height token matches; the value predates this extraction */
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.05);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  cursor: pointer;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* === Variants === */

.btn--primary {
  background-color: var(--color-primary-950);
  color: var(--color-white);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-900);
}

.btn--secondary {
  background-color: var(--color-primary-50);
  color: var(--color-primary-950);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-primary-100);
}

.btn--ghost {
  background-color: transparent;
  color: currentColor;
}

.btn--ghost:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--color-white) 10%, transparent);
}

.btn--outline {
  background-color: var(--background);
  border: var(--border-width-md) solid var(--border-default);
  color: var(--color-text-neutral-primary);
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
}

.btn--destructive {
  background-color: var(--alert);
  color: var(--alert-foreground);
}

.btn--destructive:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--alert) 90%, transparent);
}

/* === Sizes === */

.btn--default {
  height: var(--spacing-40);
  padding-inline: var(--spacing-16);
}

.btn--sm {
  padding: var(--spacing-8);
}

.btn--icon {
  width: var(--spacing-40);
  height: var(--spacing-40);
  padding: var(--spacing-8);
}