/* buttons: raised at rest, sunken while pressed, and the label moves with the press */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px;
  font: inherit; font-size: 12.5px; color: var(--text); text-decoration: none; white-space: nowrap; text-shadow: var(--emboss);
  background: var(--grad-control);
  border: 1px solid var(--edge); border-radius: var(--r-btn);
  box-shadow: var(--raised);
  cursor: pointer;
}
.btn:hover { background: var(--grad-control-hover); }
.btn:active { padding: 4px 11px 2px 13px; background: var(--grad-pressed); box-shadow: var(--sunken); text-shadow: none; }
.btn:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.btn[disabled], .btn[aria-disabled="true"] {
  padding: 3px 12px;
  color: var(--etch); background: var(--chrome-hover); border-color: var(--etch);
  box-shadow: var(--raised-soft);
  cursor: default;
}