{{ $page := . }}

<style>
{{ if templates.Exists "partials/paige/style-first.css" }}
    {{ partial "paige/style-first.css" $page | safeCSS }}
{{ end }}

body, html {
    height: 100%;
}

.highlight .chroma .hl, .highlight .chroma .lnt {
    display: flex;
}

.paige-content {
    counter-reset: paige-figure;
}

.paige-content .paige-figure.paige-figure-numbered {
    counter-increment: paige-figure;
}

.paige-content .paige-figure.paige-figure-numbered figcaption:empty::before {
    content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure);
}

.paige-content .paige-figure.paige-figure-numbered figcaption::before {
    content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure) ": ";
}

.paige-content > blockquote {
    padding: 0.5rem 1rem;
    border-left: 0.25rem solid var(--bs-border-color);
    padding-right: 0.25rem;
}

.paige-content > blockquote p:last-of-type {
    margin-bottom: 0;
}

.paige-figure {
    margin-bottom: 1rem;
}

.paige-figure .highlight .chroma pre, .paige-figure .highlight pre.chroma {
    margin-bottom: 0;
}

.paige-figure .paige-video {
    margin-bottom: 0;
}

.paige-figure > figure > div > :last-child {
    margin-bottom: 0;
}

.paige-gallery {
    margin-bottom: 1rem;
}

.paige-gallery .paige-figure {
    margin-bottom: 0;
}

.paige-gallery .paige-image {
    margin-bottom: 0;
}

.paige-figure .paige-image {
    margin-bottom: 0;
}

.paige-figure .paige-quote > blockquote {
    margin-bottom: 0;
}

.paige-header-link {
    margin-left: 0.5ch;
    opacity: 0;
    position: absolute;
    text-decoration: none;
    transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.paige-header-link:focus, .paige-header-link:hover, :hover > .paige-header-link, :target > .paige-header-link {
    opacity: 1;
}

.paige-image {
    margin-bottom: 1rem;
}

.paige-video {
    margin-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
    {{ partial "paige/dark.css" $page | safeCSS }}
}

@media (prefers-color-scheme: light) {
    {{ partial "paige/light.css" $page | safeCSS }}
}

@media (prefers-reduced-motion: reduce) {
    .paige-header-link {
        transition: none;
    }
}

{{ with $page.Param "paige.style" }}
    {{ . | safeCSS }}
{{ end }}

{{ if templates.Exists "partials/paige/style-last.css" }}
    {{ partial "paige/style-last.css" $page | safeCSS }}
{{ end }}
</style>