/* Links to single steps, bullets, admonitions, code blocks and content tabs:
   the hover icon and the highlight javascripts/block-links.js sets on the
   linked block or tab set. The ids come from hooks/block_links.py. Also the
   icon of the theme's heading permalinks, made the same as the blocks'.
   Listed in mkdocs.yml only, and screen-only here as well, so nothing of this
   reaches a PDF or a printout. */
@media screen {
    :root {
        /* The chain-link icon of javascripts/block-links.js (ICON there; the
           space before the last ".973" pair is explained there too). */
        --block-link-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24 2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24 2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24 .973.973 0 0 1 0-1.42"/></svg>');
        /* The blue of the active navigation entry (custom.css). */
        --block-link-accent: #4489ff;
        /* The tint below as an opaque mix: accent over the page background
           at the same strength (1f = 12%). */
        --block-link-tint: #4489ff1f;
        --block-link-tint-strength: 12%;
    }

    [data-md-color-scheme="slate"] {
        --block-link-tint: #4489ff2e;
        --block-link-tint-strength: 18%;
    }

    /* One icon per page, moved by the script to the first line of the hovered
       block: in the margin left of the article for a top-level step or code
       block, beside the block for a bullet, a note, or a step or code block
       inside another block, or into the hovered tab label. Coloured like
       the theme's own heading permalinks. */
    .block-link {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: var(--block-link-size, .8rem);
        height: var(--block-link-size, .8rem);
        color: var(--md-default-fg-color--lighter);
        opacity: 0;
        visibility: hidden;
        transition: opacity 125ms, visibility 125ms, color .25s;
    }

    .block-link--shown {
        opacity: 1;
        visibility: visible;
    }

    /* On a tab, the icon goes inside the label, in the padding left of the
       title: as tall as the title's letters (labels are set at .64rem), so
       it fits there without moving the title. Beside a bullet, a note, or
       a step or code block inside another block, the script sizes it to the
       item's text, the note's title or the code the same way. */
    .block-link--tab {
        --block-link-size: .64rem;
    }

    .block-link:hover,
    .block-link:focus-visible {
        color: var(--block-link-accent);
    }

    .block-link svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

    /* Heading permalinks: the chain-link icon instead of the theme's "¶".
       The "¶" stays in the page as the link's text but is not painted; the
       icon is a mask filled with the link's own colour, so the theme's
       colours, show-on-hover and fade still apply. As tall as the heading's
       text, as the tab and bullet icons are to theirs, and lowered to centre
       on its capitals (the box's baseline is its bottom edge). The theme's
       .5rem gap before it is kept. */
    .md-typeset .headerlink {
        width: 1em;
        height: 1em;
        overflow: hidden;
        vertical-align: -.15em;
        background-color: currentColor;
        -webkit-text-fill-color: transparent;
        -webkit-mask: var(--block-link-icon) center / contain no-repeat;
        mask: var(--block-link-icon) center / contain no-repeat;
    }

    /* The block icons' blue, where the theme uses its accent colour: on
       hover, on focus, and on the heading a link has just opened. */
    .md-typeset .headerlink:focus,
    .md-typeset .headerlink:hover,
    .md-typeset :target > .headerlink {
        color: var(--block-link-accent);
    }

    /* A heading highlighted by a click on its link (block-links.js) shows
       no link, hovered or not, as a highlighted block shows no icon, unless
       the link has keyboard focus. With no pointer events, a click on its
       place lands on the heading, inside the highlight. */
    .md-typeset .block-link-target > .headerlink:not(:focus-visible) {
        opacity: 0;
        pointer-events: none;
    }

    /* The linked block: a tint behind it and a bar down its left edge. The
       box is a pseudo-element painted behind the block's content but above its
       own background (isolation makes the block its stacking context), so
       admonitions get the tint too, and it reaches a little past the block so
       a code block's own background leaves a visible frame. Position and
       isolation are set only while the class is on. */
    .md-typeset .block-link-target {
        position: relative;
        isolation: isolate;
    }

    .md-typeset .block-link-target::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -.3rem;
        right: -.4rem;
        bottom: -.3rem;
        left: -.6rem;
        border-left: .2rem solid var(--block-link-accent);
        border-radius: .2rem;
        background-color: var(--block-link-tint);
        pointer-events: none;
    }

    /* A step's number or a bullet's dot sits in the list item's left margin
       (the theme's `ol li, ul li { margin-left: 1.25em }`): reach over it. */
    .md-typeset li.block-link-target::before {
        left: calc(-1.25em - .6rem);
    }

    /* A tab set: its panel and active tab are painted with the page
       background (custom.css), which would hide the tint behind them. Inside
       the linked set that background becomes the tinted one, so the panel,
       the active tab and the strip joining them tint evenly, and the
       inactive tabs show the tint through their own translucent background.
       The page background is read one level up, on .md-typeset, because a
       property defined in terms of itself is invalid. */
    .md-typeset {
        --block-link-page-bg: var(--md-default-bg-color);
    }

    .md-typeset .tabbed-set.block-link-target {
        --md-default-bg-color: color-mix(in srgb, var(--block-link-accent) var(--block-link-tint-strength), var(--block-link-page-bg));
    }

    /* A linked tab's radio is the :target, at the top of its set. The theme
       lands it .625em higher than other targets, which would tuck the top of
       the highlight under the header; land it where a linked block lands. */
    .md-typeset .tabbed-set > input[data-block-link]:target {
        --md-scroll-offset: 0rem;
    }
}