:root {
  --key-color: hsl(300, 100%, 95%);
  --key-background: hsl(300, 100%, 98%);
  --key-border: hsl(300, 100%, 90%);
  --key-fg: black;
  --key-line-width: 1px;
  --key-padding: 0 0.25rem;
  --key-padding-outer: 0.25rem;
  --key-margin: 0;
  --key-margin-outer: 0.1rem;
}

[data-theme="dark"] {
  --key-color: hsl(300, 100%, 30%);
  --key-background: hsl(300, 100%, 25%);
  --key-border: purple;
  --key-fg: lightgray;
}

.keys {
  display: inline-flex;
  padding: 0;
  margin: var(--key-margin-outer);
  background-color: var(--key-background);
  color: var(--key-fg);
  border: var(--key-line-width) solid var(--key-border);
}

.keys .icon {
  display: inline-flex;
  align-items: center;
  padding: var(--key-padding);
  background-color: var(--key-color);
}

.keys .value {
  padding: var(--key-padding);
}

.keys.missing * {
  color: red;
}