/*
 * Buttons and button-styled links, to Glacier's button spec (section 9.1).
 *
 * Five variants -- primary, secondary, ghost, danger, success -- and three
 * sizes on a 32/40/48px ladder that matches the input height, so a button
 * beside a field lines up without nudging.
 *
 * One primary button per visible area. Glacier is explicit about this: two
 * competing blue CTAs on a screen means neither is the answer to "what am I
 * meant to do here".
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.button:hover {
  text-decoration: none;
}

.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- sizes --------------------------------------------------------------- */

.button--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-caption);
}

.button--lg {
  height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--text-body);
  font-weight: 600;
}

/* --- variants ------------------------------------------------------------ */

.button--primary {
  background: var(--fill-accent);
  color: #fff;
}

.button--primary:hover {
  background: var(--ptag-blue-700);
  color: #fff;
}

.button--primary:active {
  background: var(--ptag-blue-dark);
}

.button--secondary {
  background: transparent;
  color: var(--ptag-blue);
  border-color: var(--ptag-blue);
}

.button--secondary:hover {
  background: var(--ptag-blue-50);
  color: var(--ptag-blue);
}

.button--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.button--ghost:hover {
  background: var(--surface-tertiary);
  color: var(--text-primary);
}

/* Icon only, square: a row's × in an editable table. 40px, the height of the
   inputs beside it (Glacier 9.2); the label is its aria-label. */
.button--icon {
  width: 40px;
  padding: 0;
}

.button--danger {
  background: var(--fill-danger);
  color: #fff;
}

.button--danger:hover {
  background: var(--fill-danger-hover);
  color: #fff;
}

.button--success {
  background: var(--fill-success);
  color: #fff;
}

.button--success:hover {
  background: var(--ptag-green-dark);
  color: #fff;
}

.button--block {
  display: flex;
  width: 100%;
}

/* `button_to` wraps its button in a form, which would otherwise force a line
   break in inline contexts. */
.button_to {
  display: inline-block;
}

.button_to--block {
  display: block;
  width: 100%;
}