.keycap {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 1.75rem;
  min-height: 1.625rem;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.4375rem 0.1875rem;
  border: 1px solid
    light-dark(var(--color-gray-300), var(--color-zinc-600));
  border-bottom-color: light-dark(
    var(--color-gray-400),
    var(--color-zinc-950)
  );
  border-radius: 0.3125rem;
  color: light-dark(var(--color-gray-800), var(--color-zinc-100));
  background: linear-gradient(
    to bottom,
    light-dark(var(--color-white), var(--color-zinc-700)),
    light-dark(var(--color-gray-50), var(--color-zinc-800))
  );
  box-shadow:
    0 2px 0 light-dark(var(--color-gray-300), var(--color-zinc-950)),
    inset 0 1px 0
      light-dark(var(--color-white), var(--color-zinc-600));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}

.keycap-separator {
  color: light-dark(var(--color-gray-600), var(--color-zinc-300));
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
}

.keycap--compact {
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0.0625rem 0.25rem 0.125rem;
  border-radius: 0.25rem;
  box-shadow:
    0 1px 0 light-dark(var(--color-gray-300), var(--color-zinc-950)),
    inset 0 1px 0
      light-dark(var(--color-white), var(--color-zinc-600));
  font-size: 0.625rem;
}

@media (forced-colors: active) {
  .keycap {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonText;
    box-shadow: 0 2px 0 ButtonText;
  }
}