/* Code blocks: the .code card with its copy-to-clipboard button, code as an article footer, standalone
   code blocks with their own responsive spacing, and the colors of the spans the build writes from
   Prism's tokens (build.mjs, step 4). The colors are common.css's --femto-code-* tokens. */

/**
 * Code
 */
pre,
code {
  font-family: "Fira Code", var(--femto-font-family-monospace);
}

/* All code blocks */
.code {
  position: relative;
  background-color: var(--femto-card-background-color);
}

.code pre {
  margin-bottom: 0;
}

.code code {
  min-width: min-content;
  margin-right: var(--femto-block-spacing-horizontal);
  padding: 0;
}

@media (min-width: 1024px) {
  .code code {
    font-size: 16px;
  }
}

/* The copy button, a <button type="button">: an icon on the card's background at the block's top
   right, without femto's button border, shadow or margin, and an inset focus ring on keyboard focus
   (the card clips what lies outside it). The icon is --femto-code-comment at full opacity, which
   keeps 4.5:1 on the card (WCAG 1.4.11 asks 3:1 of an icon-only control), and turns to
   --femto-contrast on hover and keyboard focus. Its color does not transition: Firefox styles the
   docs page once before the site's stylesheets apply (docs.html links them after the head scripts),
   so a color transition would run on load from femto's button colors, white on the primary
   background */
.code > button.copy-to-clipboard {
  z-index: 1;
  position: absolute;
  top: 1rem;
  right: 0;
  margin: 0;
  padding: 0.25rem 1rem 0.25rem 0.25rem;
  border: 0;
  border-radius: 0;
  background-color: var(--femto-card-background-color);
  box-shadow: none;
  color: var(--femto-code-comment);
  line-height: inherit;
  transition: none;
}

.code > button.copy-to-clipboard:focus-visible {
  box-shadow: inset 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

/* The icon (Decision 18): the button's span[role=img], the copy character ⧉, then the check ✓ */
.code > button.copy-to-clipboard > span[role=img] {
  display: block;
  font-size: 1.125rem;
  pointer-events: none;
}

.code > button.copy-to-clipboard:is(:hover, :focus-visible) {
  color: var(--femto-contrast);
}

/* While the tooltip reads "Copied", the icon is the check, in bold and --femto-code-copied, drawn in
   with common.css's icon-check */
.code > button.copy-to-clipboard[data-tooltip=Copied] > span[role=img] {
  color: var(--femto-code-copied);
  font-weight: bold;
  animation: icon-check 0.2s ease-out;
}

.code > button.copy-to-clipboard[data-tooltip]::before,
.code > button.copy-to-clipboard[data-tooltip]::after {
  font-size: 0.75em;
}

/* No tooltip once the button shows its check mark */
.code > button.copy-to-clipboard[data-tooltip=Copied]::after {
  display: none;
}

.code::after {
  position: absolute;
  inset: 0;
  border-radius: var(--femto-border-radius);
  content: "";
  pointer-events: none;
}

/* A code block's <pre> that scrolls sideways takes focus (tabindex="0": build.mjs writes it and
   site.js keeps it only on the blocks that overflow), so the keyboard can scroll it. The .code card
   clips what lies outside it, so the focus ring is femto's link ring, drawn inside the <pre> */
.code pre:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

/* Code blocks as article footer */
article footer.code {
  padding: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

article footer.code pre {
  padding: calc(var(--femto-block-spacing-vertical) * 0.66) var(--femto-block-spacing-horizontal);
  background-color: transparent;
}

/* Standalone code blocks: from 576px up, 1.25 to 2.5 times --femto-spacing around the code */
.code:not(article footer.code) {
  margin-bottom: var(--femto-block-spacing-vertical);
  overflow: hidden;
  border-radius: var(--femto-border-radius);
  box-shadow: var(--femto-card-box-shadow);
}

@media (min-width: 576px) {
  .code:not(article footer.code) {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 1.25);
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 1.25);
  }
}

@media (min-width: 768px) {
  .code:not(article footer.code) {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 1.5);
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 1.5);
  }
}

@media (min-width: 1024px) {
  .code:not(article footer.code) {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 1.75);
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 1.75);
  }
}

@media (min-width: 1280px) {
  .code:not(article footer.code) {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 2);
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 2);
  }
}

@media (min-width: 1536px) {
  .code:not(article footer.code) {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 2.5);
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 2.5);
  }
}

/* "transparent 0 0": the oracle's served CSS had "background: 0 0", its minifier's form of
   "transparent", which also sets the position to 0px 0px */
.code:not(article footer.code) pre {
  padding: calc(var(--femto-block-spacing-vertical) * 0.66) var(--femto-block-spacing-horizontal);
  background: transparent 0 0;
}

/* Small code blocks */
.code.small > button.copy-to-clipboard {
  top: 50%;
  transform: translateY(-50%);
}

/* Color syntax */
code .token.tag:not(.punctuation),
code .token.property {
  color: var(--femto-code-tag);
}

code .token.tag.attr-name:not(.punctuation),
code .token.selector:not(.punctuation),
code .token.keyword,
code .token.boolean,
code .token.function {
  color: var(--femto-code-attr);
}

code .token.tag.attr-value:not(.attr-equals),
code .token.string {
  color: var(--femto-code-value);
}

code .token.comment:not(.punctuation),
code .token.doctype {
  color: var(--femto-code-comment);
}