/*
 * .snippet — a block of code or JSON to read or copy (setup snippets,
 * request params, breadcrumb metadata). Scrolls sideways instead of
 * wrapping. .snippet--inline is a one-line value such as an API key.
 */
@layer components {
  .snippet {
    margin: 0;
    padding: calc(var(--u-pad) / 1.5);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    line-height: var(--font-lineheight-3);
    color: var(--ink);
    background: var(--fill-subtle);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-ui);
    overflow-x: auto;
    white-space: pre;
  }
  .snippet--inline {
    display: inline-block;
    max-inline-size: 100%;
    padding-block: calc(var(--u-pad) / 5);
    padding-inline: calc(var(--u-pad) / 2);
    vertical-align: middle;
    overflow-wrap: anywhere;
    white-space: normal;
    user-select: all;
  }
}