/* stylelint-disable selector-max-type */
/* Disable selector-max-type rule to target individual element types. */

:where(.radix-themes) {
  /* prettier-ignore */
  --kbd-box-shadow:
    inset 0 -0.05em 0.5em var(--gray-a2),
    inset 0 0.05em var(--white-a12),
    inset 0 0.25em 0.5em var(--gray-a2),
    inset 0 -0.05em var(--gray-a6),
    0 0 0 0.05em var(--gray-a5),
    0 0.08em 0.17em var(--gray-a7);
}
:is(.dark, .dark-theme),
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
  /* prettier-ignore */
  --kbd-box-shadow:
    inset 0 -0.05em 0.5em var(--gray-a3),
    inset 0 0.05em var(--gray-a11),
    inset 0 0.25em 0.5em var(--gray-a2),
    inset 0 -0.1em var(--black-a11),
    0 0 0 0.075em var(--gray-a7),
    0 0.08em 0.17em var(--black-a12);
}

.rt-Kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--default-font-family);
  font-weight: normal;
  vertical-align: text-top;
  white-space: nowrap;
  user-select: none;

  position: relative;
  top: -0.03em;

  font-size: 0.75em;
  min-width: 1.75em;
  line-height: 1.7em;
  box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.05em;
  word-spacing: -0.1em;
  border-radius: calc(var(--radius-factor) * 0.35em);
  letter-spacing: var(--letter-spacing, var(--default-letter-spacing));

  /* Make sure that the height is not stretched in a Flex/Grid layout */
  height: fit-content;

  color: var(--gray-12);
  background-color: var(--gray-1);
  box-shadow: var(--kbd-box-shadow);
  transition: box-shadow 120ms, background-color 120ms;

  &:where(:any-link, button) {
    @media (hover: hover) {
      &:where(:hover) {
        transition-duration: 40ms, 40ms;
        background-color: var(--color-background);
        box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
      }
    }
    &:where([data-state='open']) {
      transition-duration: 40ms, 40ms;
      background-color: var(--color-background);
      box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
    }
    &:where(:active:not([data-state='open'])) {
      padding-top: 0.05em;
      padding-bottom: 0;
      transition-duration: 40ms, 40ms;
      background-color: var(--gray-2);
      box-shadow: inset 0 0.05em var(--black-a3), 0 0 0 0.05em var(--gray-a7);
    }
    &:where(:focus-visible) {
      outline: 2px solid var(--focus-8);
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-Kbd {
    &:where(.rt-r-size-1) {
      font-size: calc(var(--font-size-1) * 0.8);
      --letter-spacing: var(--letter-spacing-1);
    }
    &:where(.rt-r-size-2) {
      font-size: calc(var(--font-size-2) * 0.8);
      --letter-spacing: var(--letter-spacing-2);
    }
    &:where(.rt-r-size-3) {
      font-size: calc(var(--font-size-3) * 0.8);
      --letter-spacing: var(--letter-spacing-3);
    }
    &:where(.rt-r-size-4) {
      font-size: calc(var(--font-size-4) * 0.8);
      --letter-spacing: var(--letter-spacing-4);
    }
    &:where(.rt-r-size-5) {
      font-size: calc(var(--font-size-5) * 0.8);
      --letter-spacing: var(--letter-spacing-5);
    }
    &:where(.rt-r-size-6) {
      font-size: calc(var(--font-size-6) * 0.8);
      --letter-spacing: var(--letter-spacing-6);
    }
    &:where(.rt-r-size-7) {
      font-size: calc(var(--font-size-7) * 0.8);
      --letter-spacing: var(--letter-spacing-7);
    }
    &:where(.rt-r-size-8) {
      font-size: calc(var(--font-size-8) * 0.8);
      --letter-spacing: var(--letter-spacing-8);
    }
    &:where(.rt-r-size-9) {
      font-size: calc(var(--font-size-9) * 0.8);
      --letter-spacing: var(--letter-spacing-9);
    }
  }
}