{{ $page := . }}

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

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

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

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

.paige-header-link::after {
    content: "#";
}

.paige-shortcode-quote .blockquote-footer {
    margin-top: 0;
}

.paige-shortcode-quote blockquote {
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    padding: 0;
}

blockquote {
    padding: 0.5rem 1rem;
    border-left: 0.25rem solid var(--bs-border-color);
    border-right: 0.25rem solid var(--bs-body-bg);
}

td,
th {
    padding: 0.25rem;
}

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

.paige-row-short:not(:last-child),
.paige-shortcode-figure .paige-shortcode-quote,
.paige-shortcode-figure .paige-video,
.paige-shortcode-figure .highlight pre.chroma,
.paige-shortcode-figure .highlight .chroma pre,
.paige-shortcode-figure .paige-shortcode-quote blockquote,
.paige-shortcode-figure figure > div > :last-child,
.paige-shortcode-gallery .paige-shortcode-figure,
.paige-shortcode-gallery .paige-shortcode-image,
blockquote > p:last-of-type {
    margin-bottom: 0;
}

.paige-shortcode-figure,
.paige-shortcode-gallery,
.paige-shortcode-image,
.paige-shortcode-quote,
.paige-row-short:last-child,
.paige-row-tall,
.paige-video,
#paige-page-content > *,
table {
    margin-bottom: 1rem;
}

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

{{ $colorscheme := $page.Param "paige.site.color_scheme" }}

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

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

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

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