.x-code {
  --code-variant-font-size-adjust: calc(var(--code-font-size-adjust) * .95);
  font-family: var(--code-font-family);
  font-size: calc(var(--code-variant-font-size-adjust) * 1em);
  font-style: var(--code-font-style);
  font-weight: var(--code-font-weight);
  letter-spacing: calc(var(--code-letter-spacing) +
      var(--letter-spacing, var(--default-letter-spacing)));
  border-radius: calc((.5px + .2em) * var(--radius-factor));
  box-sizing: border-box;
  padding-top: var(--code-padding-top);
  padding-left: var(--code-padding-left);
  padding-bottom: var(--code-padding-bottom);
  padding-right: var(--code-padding-right);
  height: fit-content;
  line-height: 1.25;
}

.x-code :where(.x-code) {
  font-size: inherit;
}

.x-code:where([data-size="1"]) {
  font-size: calc(var(--font-size-1) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-1);
  --letter-spacing: var(--letter-spacing-1);
}

.x-code:where([data-size="2"]) {
  font-size: calc(var(--font-size-2) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-2);
  --letter-spacing: var(--letter-spacing-2);
}

.x-code:where([data-size="3"]) {
  font-size: calc(var(--font-size-3) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-3);
  --letter-spacing: var(--letter-spacing-3);
}

.x-code:where([data-size="4"]) {
  font-size: calc(var(--font-size-4) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-4);
  --letter-spacing: var(--letter-spacing-4);
}

.x-code:where([data-size="5"]) {
  font-size: calc(var(--font-size-5) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-5);
  --letter-spacing: var(--letter-spacing-5);
}

.x-code:where([data-size="6"]) {
  font-size: calc(var(--font-size-6) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-6);
  --letter-spacing: var(--letter-spacing-6);
}

.x-code:where([data-size="7"]) {
  font-size: calc(var(--font-size-7) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-7);
  --letter-spacing: var(--letter-spacing-7);
}

.x-code:where([data-size="8"]) {
  font-size: calc(var(--font-size-8) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-8);
  --letter-spacing: var(--letter-spacing-8);
}

.x-code:where([data-size="9"]) {
  font-size: calc(var(--font-size-9) * var(--code-variant-font-size-adjust));
  line-height: var(--line-height-9);
  --letter-spacing: var(--letter-spacing-9);
}

.x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="text"])) {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
}

.x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="text"])):where([data-high-contrast]) {
  color: var(--accent-12);
}

.x-code:where([data-variant="solid"]) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}

.x-code:where([data-variant="solid"])::selection {
  background-color: var(--accent-7);
  color: var(--accent-12);
}

.x-code:where([data-variant="solid"]):where([data-high-contrast]) {
  background-color: var(--accent-12);
  color: var(--accent-1);
}

.x-code:where([data-variant="outline"]) {
  box-shadow: inset 0 0 0 max(1px, .033em) var(--accent-a8);
  color: var(--accent-a11);
}

.x-code:where([data-variant="outline"]):where([data-high-contrast]) {
  box-shadow: inset 0 0 0 max(1px, .033em) var(--accent-a7),
      inset 0 0 0 max(1px, .033em) var(--neutral-a11);
  color: var(--accent-12);
}

.x-code:where([data-variant="text"]) {
  --code-variant-font-size-adjust: var(--code-font-size-adjust);
  padding: 0;
}

.x-code:where([data-variant="text"]):where([data-accent]) {
  color: var(--accent-a11);
}

.x-code:where([data-variant="text"]):where([data-accent][data-high-contrast]) {
  color: var(--accent-12);
}