::selection {
    background-color: prop(--colors --select --bg);
    color:            prop(--colors --select --fg);
}

img::selection {
    background-color: prop(--colors --select --img-bg);
}

html,
pre,
code {
    font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
}

html,
body,
main {
    box-sizing: border-box;
    height:     100%;
}

html {
    background-color: prop(--colors --bg);
    color:            prop(--colors --fg);
    font-family:      $font-fam--text;
    font-size:        1em / 16px * $font-size;
    line-height:      $line-height;
    scroll-behavior:  smooth;
}

body {
    margin:  0;
    padding: 0;
}

pre,
code {
    font-family: $font-fam--mono;
}

code {
    color: var(--code--fg);
}

pre {
    margin:     ($line-height * 1em) 0 0;
    overflow-x: auto;

    code {
        color: currentColor;
    }
}

strong {
    color:       prop(--colors --fg-lo);
    font-weight: bold;
}

small {
    color:     prop(--colors --fg-hi);
    font-size: 1 / 16 * 14em;
}

ul,
ol {
    margin:     ($line-height * 1em) 0 0;
    padding:    0;
    list-style: none;
}

li {
    position:     relative;
    padding-left: $subcontent--indent;

    &::before {
        display:     inline-block;
        position:    absolute;
        width:       $subcontent--indent;
        margin-left: -1 * $subcontent--indent;
        color:       prop(--colors --fg-hi);
        font-family: $font-fam--mono;
    }
}

ul > li::before {
    content: '-';
}

ol {
    counter-reset: cnt;

    > li {
        counter-increment: cnt;

        &::before {
            content: counter(cnt) '.';
        }
    }
}

ul ul {
    margin-top: 0;
}

dl {
    margin:  ($line-height * 1em) 0 0;
    padding: 0;
}

dt,
dd {
    display: inline-block;
}

dt {
    color:       prop(--colors --fg-lo);
    font-weight: bold;

    &::after {
        content:     ':';
        color:       prop(--colors --fg);
        font-weight: normal;
    }
}

dd {
    margin: 0 3ch 0 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin:                ($line-height * 2em) 0 0;
    font-family:           $font-fam--large;
    font-size:             1em;
    font-weight:           600;
    line-height:           1.2;
    font-feature-settings: 'ss02' 1;

    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
        margin-top: $line-height * 1em;
    }
}

h1,
h2 {
    color: var(--heading--fg);
}

h1 {
    text-transform: uppercase;
}

p {
    margin: ($line-height * 1rem) 0 0;
}

:link,
:visited {
    color: var(--link--idle--fg);
}

hr {
    height:           1px;
    margin:           ($line-height * 1em) 0;
    border:           0;
    background-color: prop(--colors --obj);
}

blockquote,
pre {
    margin:       ($line-height * 1em) 0 0 1px;
    padding-left: calc(#{$subcontent--indent} - 3px);
    border-left:  2px solid prop(--colors --obj);
}