/* Component styling for markdown code blocks & inline code */

/* Slight right padding on pre to ensure margin is hit */
.md-typeset pre {
    padding-right: var(--size-2);
}

/* Code Blocks Override */
[data-md-color-scheme="default"] .highlight {
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid var(--xnano-accent-border);
    box-shadow: var(--xnano-accent-shadow) 4px 4px 0px 0px;
    position: relative;
    /* Annotation tooltips are positioned outside the code box. Clipping this
       wrapper cuts their text off at the rounded edge. */
    overflow: visible;
}

/* Code Blocks Override */
[data-md-color-scheme="slate"] .highlight {
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid var(--xnano-accent-border);
    box-shadow: var(--xnano-accent-shadow) 4px 4px 0px 0px;
    position: relative;
    overflow: visible;
}

/* Strip default borders/shadows/radius from the child pre tag so they sit perfectly in the wrapper */
.highlight pre {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Integrated filename header bar */
.highlight > span.filename {
    display: flex;
    align-items: baseline;
    gap: var(--size-3);
    margin-top: 0; /* override theme .highlight span.filename { margin-top: 1em } */
    padding: var(--size-2) 1.1764705882em; /* match .md-typeset pre > code horizontal padding */
    font-family: "Geist Pixel", monospace;
    font-variation-settings: "ELSH" 40;
    font-size: 0.78em;
    font-weight: 400;
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
    border-radius: var(--radius-2) var(--radius-2) 0 0;
}
.highlight > span.filename .code-lang {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

/* Keeps the code body flush with the wrapper border */
.highlight:has(> span.filename) > pre > code {
    border-radius: 0 0 var(--radius-2) var(--radius-2);
}
[data-md-color-scheme="default"] .highlight > span.filename {
    background-color: var(--xn-code-filename-bg);
    color: var(--xnano-accent-ink);
    border-color: var(--xnano-accent-border);
}
[data-md-color-scheme="default"] .highlight > span.filename .code-lang {
    color: var(--xnano-accent);
    opacity: 0.85;
}
[data-md-color-scheme="slate"] .highlight > span.filename {
    background-color: var(--xn-code-filename-bg);
    color: #dedcd1;
    border-color: var(--xnano-accent-border);
}
[data-md-color-scheme="slate"] .highlight > span.filename .code-lang {
    color: var(--xnano-accent);
    opacity: 0.85;
}