kbd.css

/* based on: https://dylanatsmith.com/wrote/styling-the-kbd-element */

body.theme-dark {
  --kbd-color-background: var(--color-base-50);
  --kbd-color-border: var(--color-base-30);
  --kbd-color-text: var(--color-base-10);
}

body.theme-light {
  --kbd-color-background: var(--color-base-10);
  --kbd-color-border: var(--color-base-40);
  --kbd-color-text: var(--text-normal);
}

.suggestion-item.mod-complex .suggestion-hotkey,
kbd {
  --kbd-font: var(--font-text);

  display: inline-block;
  background-color: var(--kbd-color-background);
  color: var(--kbd-color-text);

  /* Round off the corners like physical keys have */
  border-radius: var(--radius-s);

  /* Add a simple border */
  border: 1px solid var(--kbd-color-border);

  /* A sharp shadow (with no blur) really gives */
  /* the old school keyboard look */
  box-shadow: 0 2px 0 1px var(--kbd-color-border);

  /* Remove the text cursor — totally optional */
  /* but I wanted it for my hover effect */
  cursor: default;

  /* By default, browsers style <kbd> with a monospace typeface */
  font-family: var(--kbd-font);
  font-size: var(--font-smaller);

  /* Remove any extra space so I can accurately tweak the padding */
  line-height: 1;

  /* Make narrow numbers and letters look less odd */
  min-width: calc(1em + 10px);

  /* Keep the characters centred when narrower than the `max-width` */
  text-align: center;

  /* Seemed to look more key-like with more horizontal padding 🤷 */
  padding: 2px 5px;

  /* These two lines pull the whole element up now that they’re */
  /* bottom-heavy due to the `box-shadow`. This looks better */
  /* against the cap height of regular paragraph text. */
  position: relative;
  top: -1px;

  /* This is my favourite part of the whole thing. The key gets */
  /* “pushed” down and the shadow gets reduced so it looks like */
  /* it might when typing on a physical keyboard. */
  &:hover {
    box-shadow: 0 1px 0 0.5px var(--kbd-color-border);
    top: 1px;
  }
}