/*
 * Buttons (Kiln/UI/Theme.swift): .button is a quiet pill with a hairline rim; .button--primary is the one filled jade
 * button on screen, the action that moves things on; .button--quiet is text with no frame until the pointer is over
 * it; .button--danger is for what can't be undone.
 */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 7px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 550; line-height: 1.25;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); text-decoration: none; }
.button:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.button svg { width: 15px; height: 15px; flex: none; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.button--primary {
  border-color: transparent;
  background: linear-gradient(#3A7C6D, var(--accent-deep));
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.button--primary:hover { background: linear-gradient(#36766A, #2A6054); }
.button--primary:active { background: var(--accent-deep); }
:root[data-theme="dark"] .button--primary { background: linear-gradient(#7CC0AC, #5DA592); color: var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button--primary { background: linear-gradient(#7CC0AC, #5DA592); color: var(--on-accent); }
}

.button--quiet { border-color: transparent; background: none; color: var(--ink-soft); padding-inline: 10px; }
.button--quiet:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }

.button--danger { border-color: color-mix(in srgb, var(--alert) 45%, transparent); background: color-mix(in srgb, var(--alert) 7%, transparent); color: var(--alert); }
.button--danger:hover { background: color-mix(in srgb, var(--alert) 13%, transparent); }

.button--small { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.button--block { width: 100%; }

/* A button that reads as a link, inside a sentence. */
.link-button { display: inline; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

form.button_to { margin: 0; display: inline-block; }