/* Kodza — Kbd
   Keyboard keys with a little depth, alone or in a combo, and a list of shortcuts. Type one
   for real and its keys sink as you press them; when the whole combo is down, its line
   lights up. data-key="Mod" shows ⌘ on a Mac and Ctrl elsewhere.
   Everything is tuned with the --kz-kbd-* variables. */
.kodza-kbd,
.kodza-kbd-combo,
.kodza-kbd-list {
  --kz-kbd-bg: #ffffff;
  --kz-kbd-fg: #0a0a0a;
  --kz-kbd-muted: rgba(10, 10, 10, 0.62);
  --kz-kbd-line: rgba(10, 10, 10, 0.16);
  --kz-kbd-depth: rgba(10, 10, 10, 0.18);
  --kz-kbd-soft: rgba(10, 10, 10, 0.05);
  --kz-kbd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The size comes from the combo (--lg) or stays at 26px */
.kodza-kbd {
  --kz-kbd-s: var(--kz-kbd-size, 26px);
}

.kodza-kbd {
  display: inline-grid;
  place-items: center;
  min-width: var(--kz-kbd-s);
  height: var(--kz-kbd-s);
  padding: 0 calc(var(--kz-kbd-s) * 0.26);
  box-sizing: border-box;
  border-radius: calc(var(--kz-kbd-s) * 0.27);
  background: var(--kz-kbd-bg);
  box-shadow: inset 0 0 0 1px var(--kz-kbd-line), 0 2px 0 var(--kz-kbd-depth);
  color: var(--kz-kbd-fg);
  font-family: inherit;
  font-size: calc(var(--kz-kbd-s) * 0.48);
  font-weight: 500;
  line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Pressed: the key sinks into its depth */
.kodza-kbd.is-pressed {
  box-shadow: inset 0 0 0 1px var(--kz-kbd-line), 0 0 0 var(--kz-kbd-depth);
  transform: translateY(2px);
}

.kodza-kbd-combo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kodza-kbd-combo--lg {
  --kz-kbd-size: 64px;

  gap: 10px;
}

.kodza-kbd-combo--lg .kodza-kbd {
  box-shadow: inset 0 0 0 1px var(--kz-kbd-line), 0 5px 0 var(--kz-kbd-depth);
  font-weight: 400;
}

.kodza-kbd-combo--lg .kodza-kbd.is-pressed {
  box-shadow: inset 0 0 0 1px var(--kz-kbd-line), 0 0 0 var(--kz-kbd-depth);
  transform: translateY(5px);
}

/* A list of shortcuts */
.kodza-kbd-list {
  margin: 0;
  padding: 0;
  color: var(--kz-kbd-fg);
  font-size: 15px;
  list-style: none;
}

.kodza-kbd-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* The line hangs 14px past the text on each side, never more than the page leaves there (a 10px
     phone gutter): it never widens the page */
  margin: 0 calc(-1 * min(14px, (100vw - 100%) / 2));
  padding: 12px min(14px, (100vw - 100%) / 2);
  border-radius: 12px;
  transition: background-color 0.5s ease;
}

.kodza-kbd-list > li + li {
  box-shadow: inset 0 1px 0 var(--kz-kbd-soft);
}

/* The whole combo is down: its line lights up */
.kodza-kbd-list > li.is-hit {
  background: var(--kz-kbd-soft);
  transition-duration: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-kbd,
  .kodza-kbd-list > li {
    transition-duration: 0.01ms !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-kbd,
.dark-section .kodza-kbd-combo,
.dark-section .kodza-kbd-list {
  --kz-kbd-bg: #1c1c1c;
  --kz-kbd-fg: #f2f2f0;
  --kz-kbd-muted: rgba(242, 242, 240, 0.62);
  --kz-kbd-line: rgba(255, 255, 255, 0.16);
  --kz-kbd-depth: rgba(255, 255, 255, 0.14);
  --kz-kbd-soft: rgba(255, 255, 255, 0.07);
}
*/