code {
background: var(--code-bg-inline);
padding: 0.15em 0.4em;
border-radius: var(--radius-code);
font-family: var(--font-mono);
color: var(--code-inline);
}
a code {
color: var(--code-link);
text-decoration: underline;
text-decoration-color: var(--border);
text-underline-offset: 2px;
}
a:hover code,
a:focus-visible code {
text-decoration-color: currentColor;
}
.code-copyable {
cursor: pointer;
transition: color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.code-copyable:hover {
box-shadow: inset 0 0 0 1px var(--border);
}
.code-copyable:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
.code-copyable.copied {
color: var(--code-success);
box-shadow: inset 0 0 0 1px var(--code-success);
}
.code-swatch {
display: inline-block;
width: 9px;
height: 9px;
margin-right: 5px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
vertical-align: 1px;
}
pre {
background: var(--code-bg);
padding: 16px;
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-block);
font-family: var(--font-mono);
font-size: inherit;
}
.code-scroll {
display: block;
overflow-x: auto;
min-width: 0;
flex: 1 1 auto;
outline-offset: -2px;
}
.code-scroll:focus-visible {
outline: var(--focus-ring);
}
.code-scroll {
background:
linear-gradient(to left, var(--code-bg) 24px, transparent) 100% 0 / 40px 100% no-repeat local,
linear-gradient(to left, var(--fade-shadow), transparent 24px) 100% 0 / 24px 100% no-repeat scroll,
var(--code-bg);
}
@media (prefers-contrast: more) {
.code-scroll {
background: var(--code-bg);
}
}
.code-block--numbered pre {
display: flex;
gap: 16px;
}
.code-gutter {
flex-shrink: 0;
text-align: right;
color: var(--code-comment);
user-select: none;
-webkit-user-select: none;
}
pre code {
background: none;
padding: 0;
color: var(--code-name);
}
.code-block {
position: relative;
}
.code-copy {
--focus-ring: 2px solid var(--code-inline);
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--code-comment);
cursor: pointer;
transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.code-copy:hover,
.code-copy:focus-visible {
color: var(--code-inline);
border-color: var(--code-inline);
}
.code-copy:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
.code-copy svg + svg {
display: none;
}
.code-copy.copied {
color: var(--code-success);
border-color: var(--code-success);
}
.code-copy.copied svg:first-child {
display: none;
}
.code-copy.copied svg + svg {
display: block;
}
@media (max-width: 25em) {
pre {
border-radius: var(--radius-code);
}
}
@media (prefers-reduced-motion: reduce) {
.code-copy,
.code-copyable {
transition: none;
}
}