/* Button component — Zed-like flat outline button.
 *
 * Bright fill with a hairline border and accent mono label; hover is a
 * whisper of accent tint rather than shadow and lift. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pre-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--mono-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button:hover {
  background: var(--inline-code-bg);
  border-color: var(--pre-border);
}

.button:active {
  background: var(--inline-code-bg);
}

.button svg {
  flex-shrink: 0;
  color: var(--accent);
}

.button__icon {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}

/* Keycap label for the button's keyboard shortcut */
.button__hotkey-hint {
  padding: 1px 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  font-family: var(--mono-font);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.2;
  vertical-align: middle;
  color: var(--muted);
}

/* Secondary button */
.button--secondary {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--border-subtle);
}

.button--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}

.button--secondary svg,
.button--secondary .button__icon {
  color: var(--muted);
}