/*
 * Sorivelo buttons, icon buttons and keyboard keys (handoff section 4).
 *
 * Button: <button type="button" class="sv-btn sv-btn-primary">...</button>
 *   Variants: sv-btn-primary (violet), sv-btn alone (secondary, white),
 *   sv-btn-quiet (transparent), sv-btn-danger (solid, for the confirm button
 *   of a destructive dialog) and sv-btn-danger-outline (a Delete button that
 *   sits among others). Sizes: sv-btn-sm 30px, default 36px, sv-btn-lg 44px.
 *   Leading icon: {{icon "plus"}} before the text. Trailing shortcut:
 *   <kbd class="sv-kbd" aria-hidden="true">D</kbd> after the text, with
 *   aria-keyshortcuts="D" on the button so the name stays "New deal".
 *   Busy: svButtonBusy(button, "Saving") from button.js keeps the width,
 *   shows a spinner and the verb, and sets aria-busy.
 *   Works on <a href> too (a link that looks like a button).
 *
 * IconButton: <button type="button" class="sv-icon-btn" aria-label="More
 *   actions">{{icon "more"}}</button>. 36px; sv-icon-btn-sm 32px,
 *   sv-icon-btn-xs 28px. The aria-label is required (a Go test checks
 *   templates; svIconButton() in button.js refuses to make one without).
 *
 * Kbd: <kbd class="sv-kbd">K</kbd>, several in a <span class="sv-kbd-group">.
 *   Inside a primary button it takes the on-primary colors by itself;
 *   sv-kbd-on-primary and sv-kbd-on-night set them anywhere else.
 *
 * Every rule sets font, size and color itself so the old Bootstrap pages
 * (which style button, a and kbd) cannot change how these look.
 */

/* Button */
.sv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  height: var(--control-md);
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.sv-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-hover);
  color: var(--ink);
}

.sv-btn-primary {
  border-color: var(--violet);
  background: var(--violet);
  color: var(--surface);
}

.sv-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--violet-press);
  background: var(--violet-press);
  color: var(--surface);
}

.sv-btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
}

.sv-btn-quiet:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-hover);
  color: var(--ink);
}

.sv-btn-danger {
  border-color: var(--danger-button);
  background: var(--danger-button);
  color: var(--surface);
}

.sv-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--risk);
  background: var(--risk);
  color: var(--surface);
}

.sv-btn-danger-outline {
  border-color: var(--risk-border);
  background: var(--surface);
  color: var(--risk);
}

.sv-btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--risk-tint);
  color: var(--risk);
}

/* Sizes */
.sv-btn-sm {
  height: var(--control-sm);
  padding: 0 10px;
  font-size: 13px;
}

.sv-btn-lg {
  height: var(--control-lg);
  padding: 0 18px;
  font-size: 15px;
}

/* Icons inside a button keep their 16px and never shrink */
.sv-btn > .sv-icon {
  flex: none;
}

/* Busy: spinner plus a verb; button.js holds the width */
.sv-btn[aria-busy="true"] {
  cursor: progress;
}

/* Disabled: still readable, clearly not clickable */
.sv-btn:disabled,
.sv-btn[aria-disabled="true"]:not([aria-busy="true"]) {
  opacity: .5;
  cursor: not-allowed;
}

/* IconButton */
.sv-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--control-md);
  height: var(--control-md);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-3);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}

.sv-icon-btn:hover:not(:disabled):not([aria-disabled="true"]),
.sv-icon-btn[aria-expanded="true"] {
  background: var(--control-hover);
  color: var(--ink);
}

.sv-icon-btn-sm {
  width: 32px;
  height: 32px;
}

.sv-icon-btn-xs {
  width: 28px;
  height: 28px;
}

.sv-icon-btn:disabled,
.sv-icon-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/*
 * Touch: small buttons keep their look but get a 44px hit area (handoff 11),
 * drawn as an invisible box around them
 */
@media (pointer: coarse) {
  .sv-btn::after,
  .sv-icon-btn::after {
    content: "";
    position: absolute;
    top: min(0px, calc((100% - var(--control-lg)) / 2));
    bottom: min(0px, calc((100% - var(--control-lg)) / 2));
    left: min(0px, calc((100% - var(--control-lg)) / 2));
    right: min(0px, calc((100% - var(--control-lg)) / 2));
  }
}

/* Kbd */
.sv-kbd {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-kbd);
  background: var(--kbd-bg);
  box-shadow: none;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.sv-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.sv-btn-primary .sv-kbd,
.sv-kbd-on-primary {
  border-color: var(--kbd-on-primary-border);
  background: var(--kbd-on-primary-bg);
  color: var(--kbd-on-primary-text);
}

.sv-kbd-on-night {
  border-color: var(--night-line);
  background: var(--night);
  color: var(--kbd-on-night-text);
}