/*
Kbd

A keycap for a key or a shortcut. Builds on @elements/style's bare <kbd>
(mono, muted fill, rule border) and sizes it from the tag tokens so a
one-character key is square and a run of keys lines up.

  .kbd             one key
  .kbd-group       keys side by side, with optional separators
  .kbd-separator   the "+" or "then" between keys

Inside a button or a tooltip the cap is a translucent outline over
whatever fill it sits on, so its text keeps the fill's own contrast on a
primary button and on an inverse tooltip.
*/

@layer components {

.kbd {
  box-sizing:      border-box;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-1);
  min-width:       var(--tag-height);
  height:          var(--tag-height);
  padding:         0 var(--space-1);
  border:          var(--control-border-width) solid var(--rule);
  border-radius:   var(--radius-tag);
  background:      var(--bg-muted);
  box-shadow:      0 var(--control-border-width) 0 var(--rule);
  color:           var(--ink-soft);
  font-family:     var(--font-mono);
  font-size:       var(--tag-font-size);
  font-weight:     var(--weight-medium);
  font-style:      normal;
  line-height:     1;
  white-space:     nowrap;
  vertical-align:  bottom;   /* centered within a line, never taller than it */
  user-select:     none;
}

.kbd > svg {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.kbd-group {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  font-family:    var(--font-ui);
  font-size:      var(--tag-font-size);
  vertical-align: bottom;
}

/* A <kbd> wrapping <kbd>s is a key combination; the outer one is not a cap. */
kbd.kbd-group {
  padding:    0;
  border:     0;
  background: none;
  box-shadow: none;
  color:      inherit;
}

.kbd-key {
  display: contents;
}

.kbd-separator {
  color: var(--ink-dim);
}

/* On a fill: a translucent outline of the text color over the fill. The
   cap adds no tint behind its text, so a key reads exactly as well as the
   label beside it on any fill. */
:is(.button, button, [role="tooltip"], .tooltip) .kbd {
  border-color: transparent;
  background:   transparent;
  box-shadow:   inset 0 0 0 var(--control-border-width) color-mix(in oklab, currentColor 45%, transparent);
  color:        inherit;
}

:is(.button, button, [role="tooltip"], .tooltip) .kbd-separator {
  color: inherit;
}

}