@layer components {
  .rs-hotkey {
    display: inline-flex;
    justify-content: center;
    min-inline-size: calc(
      var(--rs-line-height-caption-1) + var(--rs-unit-x1) * 2
    );
    border-radius: var(--rs-radius-small);
    padding: var(--rs-unit-x1) var(--rs-unit-x2);
    background: var(--rs-color-background-neutral-faded);
    color: var(--rs-color-foreground-neutral);
    font-family: var(--rs-font-family-monospace);
    font-size: var(--rs-font-size-caption-1);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-hotkey[data-active] {
    background: var(--rs-color-background-neutral);
    color: var(--rs-color-on-background-neutral);
  }
}