@layer ui-reset, ui;

/* kbd */
@layer ui {
  kbd {
    border-radius: var(--ui-rounded-2);
    min-width: 1.5em;
    padding-block: .15em;
    padding-inline: calc(.33em * clamp(1, var(--ui-rounded-scale) * .75, 1.3));
    background: var(--ui-neutral-200);
    color: var(--ui-neutral-800);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .75em;
    line-height: 1;
    display: inline-flex;

    & + kbd {
      margin-left: .5em;
    }

    &:has( > kbd) {
      min-width: unset;
      color: var(--ui-neutral-400);
      background: none;
      gap: .35em;
      padding: 0;
      font-size: 1em;

      & > kbd {
        margin-left: 0;
      }
    }
  }
}