/* Componente global: tamanho por --pad-size/--pad-font, sem depender da tela.
   Somente a posição de cada badge pertence ao HUD, menu ou modal. */
kbd.pad-badge:empty {
  display: none;
}

kbd.pad-badge.pad-on {
  --pad-c: #cdd8b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  min-width: var(--pad-size, 24px);
  height: var(--pad-size, 24px);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #141a12;
  border: 2px solid var(--pad-c);
  color: var(--pad-c);
  font: 900 var(--pad-font, 13px)/1 system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  text-shadow: none;
  box-shadow: 0 1px 2px #0006;
}

kbd.pad-badge.pad-on .pad-sym {
  width: calc(var(--pad-size, 24px) * .65);
  height: calc(var(--pad-size, 24px) * .65);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

kbd.pad-badge.pad-on[data-glyph="a"] {
  --pad-c: #82d04f;
}

kbd.pad-badge.pad-on[data-glyph="b"] {
  --pad-c: #ff6b5e;
}

kbd.pad-badge.pad-on[data-glyph="x"] {
  --pad-c: #5aa7ff;
}

kbd.pad-badge.pad-on[data-glyph="y"] {
  --pad-c: #ffd23f;
}

kbd.pad-badge.pad-on[data-glyph="triangle"] {
  --pad-c: #45d6a8;
}

kbd.pad-badge.pad-on[data-glyph="circle"] {
  --pad-c: #ff6b6b;
}

kbd.pad-badge.pad-on[data-glyph="cross"] {
  --pad-c: #6aa9ff;
}

kbd.pad-badge.pad-on[data-glyph="square"] {
  --pad-c: #f08ccf;
}

kbd.pad-badge.pad-on[data-glyph="stick"] {
  font-size: calc(var(--pad-font, 13px) * .8);
  border-width: 1.5px;
}

kbd.pad-badge.pad-on[data-glyph="pill"] {
  min-width: 0;
  padding: 0 7px;
  border-radius: 6px;
  border-width: 1.5px;
  font-size: calc(var(--pad-font, 13px) * .8);
  letter-spacing: .4px;
}