/*
 * Kbd
 *
 * Drawn in Figma as `Kbd` on the Command Palette page.
 *
 *   key      20 tall, at least 20 wide, 4 across; radius/xs
 *   colour   surface/subtle key, border/default rule, text/secondary glyph
 *   type     caption, medium — a key is read at a glance, not studied
 *
 * A shortcut is a group of keys 2 apart, never "⌘+K" with a printed plus:
 * the keys are what the reader looks for on the keyboard, and the plus is not
 * one of them.
 *
 * The key carries its own background, so the contrast gate measures the glyph
 * against the key rather than whatever it sits on — a menu row, a hover.
 */
.ion-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font: inherit;
}

.ion-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-20);
  height: var(--spacing-20);
  padding-inline: calc(var(--spacing-4) - var(--border-width-default));
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-xs);
  background-color: var(--surface-subtle);
  color: var(--text-secondary);
  font-family: var(--font-family-sans);
  font-size: var(--type-caption);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Forced colours drop the fill; the rule is what keeps each key a key. */
@media (forced-colors: active) {
  .ion-kbd {
    border-color: CanvasText;
  }
}