kbd {
  --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);
  vertical-align: middle;
  text-align: center;
  font-size: 0.85em;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  min-width: 1.75em;
  padding: 0.18em 0.32em 0.32em;
  margin: 0 0.25em;
  background: var(--#{$CSS_VAR_PFX}bg-color-dark);
  border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
  border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.5);
  box-shadow: inset 0 -0.125em 0 var(--#{$CSS_VAR_PFX}local-border-color);
  will-change: transform;
  transition: all var(--#{$CSS_VAR_PFX}simple-transition) 0.15s;

  &:hover {
    box-shadow: inset 0 0 0 var(--#{$CSS_VAR_PFX}local-border-color);
    transform: translateY(0.15em);
  }

  kbd {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none !important;
  }
}