/* The styles of the code blocks of this site.
 *
 * The colors of a block, of its line numbers and of its marked lines are
 * written into the HTML while the site is built, from the theme the build
 * uses, so nothing here picks a color. What is left for the page is the frame
 * of a block, the bar which holds the title of a block, the button which
 * copies it — which the script of the page writes, in the bar of a title or
 * in the corner of a block without one — and how wide the column of line
 * numbers is.
 *
 * The frame, the bar and the button take the color of the text around them,
 * thinned out, so that they follow the page in either appearance.
 *
 * A stylesheet generated by lumis — `lumis themes build-css <theme>` — holds
 * the same layout rules, the class of every token and colors for a page which
 * prefers classes over inline styles. A page which loads one can drop the
 * block below. */

/* Follow the light or dark preference of the reader. This is what picks the
 * side of the `light-dark()` colors a block is written with. */

:root {
    /* The font of the code of a block, of the bar of its title and of the
     * button which copies it. */
    --lumis-font:
        "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;

    /* The fill and the line of the frame, of the bar and of the button. */
    --lumis-chrome: color-mix(in srgb, currentColor 7%, transparent);
    --lumis-line: color-mix(in srgb, currentColor 20%, transparent);
}

/* Set the block apart from the text around it, with room for the code it
 * holds. */
pre.lumis {
    margin: 1.5rem 0;
    padding: 1rem 0.5rem;
    border: 1px solid var(--lumis-line);
    border-radius: 0.5rem;
    font-family: var(--lumis-font);
    /*font-size: 0.9rem;*/
    /*line-height: 1.5;*/
    overflow-x: scroll;
}

pre.lumis code {
    font-weight: 400;
}

/* A block which has a title sits inside the bar of its title, and the two
 * share one frame. */
figure.lumis-figure {
    margin: 1.5rem 0;
    border: 1px solid var(--lumis-line);
    border-radius: 0.5rem;
    overflow: hidden;
    font-family: var(--lumis-font);
}

figure.lumis-figure > pre.lumis {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* The bar of a title: the name of the block on the left, and the button which
 * copies the block, which the script of the page writes, on the right. */
figcaption.lumis-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--lumis-line);
    background-color: var(--lumis-chrome);
    font-size: 0.8rem;
    font-weight: 600;
}

/* A name too long for the bar ends in an ellipsis, rather than pushing the
 * button out of it. */
.lumis-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The button which copies a block. It holds one icon rather than a word, and
 * sits either in the bar of a title or in the corner of a block which has
 * none, where the rules below keep it until the reader comes near it. */
.lumis-copy {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background-color: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.lumis-copy > svg {
    width: 1rem;
    height: 1rem;
}

.lumis-copy:hover {
    background-color: var(--lumis-line);
}

/* A block which names no file takes a frame of its own, so that the button can
 * sit in its corner and stay there while the code scrolls under it. */
.lumis-block {
    position: relative;
    margin: 1.5rem 0;
}

.lumis-block > pre.lumis {
    margin: 0;
}

/* The button of such a block keeps out of the way of the code, and takes the
 * color the stylesheet of the site gives to the page (`--background`), so that
 * no line shows through it once it is read. */
.lumis-block > .lumis-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: var(--background, transparent);
    box-shadow: inset 0 0 0 1px var(--lumis-line);
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

/* A reader who reached the block, with a pointer or with the keyboard, sees
 * the button. */
.lumis-block:hover > .lumis-copy,
.lumis-block:focus-within > .lumis-copy {
    opacity: 1;
}

/* A reader with no pointer to hover with, or one who asked for less motion,
 * sees the button at once. */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .lumis-block > .lumis-copy {
        opacity: 1;
        transition: none;
    }
}

@layer lumis {
    /* A line which is too long for the page wraps, rather than running past
     * its edge. */
    pre.lumis > code {
        display: block;
        width: fit-content;
        min-width: 100%;
        overflow-wrap: anywhere;
    }

    /* A line takes the width of the block around it, so that the background of
     * a marked line reaches its edges. */
    pre.lumis > code > span.l-line {
        display: inline-block;
        width: 100%;
        min-height: 1lh;
        vertical-align: top;
    }

    /* A marked line keeps the background the theme gives to `highlighted`,
     * written into the HTML of the line, and takes an accent on its left edge
     * in the color of its own text. */
    pre.lumis > code > span.l-highlighted {
        box-shadow: inset 3px 0 0
            color-mix(in srgb, currentColor 40%, transparent);
    }
}

/* Give the line numbers a column of their own, so that the code stays aligned
 * past line 9. */
.l-line-number {
    display: inline-block;
    width: 3ch;
    margin-right: 3ch;
    text-align: right;
}