.key {
  position: relative;
  display: inline-block;
  min-width: var(--key--height);
  height: var(--key--height);
  padding: var(--spacing--s) var(--spacing--m);
  background-color: var(--color--white);
  color: var(--color--foreground);
  border: var(--border);
  border-radius: var(--border--radius);
  box-shadow: var(--box-shadow);
  font-family: var(--font--family--monospace);
  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
  vertical-align: middle;
  text-align: center;
  white-space: pre-wrap;

  & + & {
    margin-inline-start: var(--spacing--xs);
  }

  :global(svg) {
    position: absolute;
    top: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
    left: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
    width: var(--key--icon--size);
    height: var(--key--icon--size);
  }
}