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

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

:focus {
    outline:        2px solid prop(--colors --focus-ring);
    outline-offset: 3px;
}

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

html {
    height:           100%;
    background-color: prop(--colors --bg);
    color:            prop(--colors --fg);
    font-family:      $font-fam--text;
    font-size:        px-to-em($font-size);
    line-height:      $line-height;
}

body {
    box-sizing: border-box;
    min-height: 100%;
    margin:     0;
    padding:    2px;
}

main {
    @include iro-responsive-env(('sm', 'md')) {
        font-size: iro-responsive-set((1rem, iro-px-to-rem(18px)));
    }
}

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

code {
    color:     prop(--colors --code --fg);
    font-size: px-to-em(15px);
}

pre {
    margin:      0;
    overflow-x:  auto;
    font-size:   px-to-em(15px);
    line-height: 1.4;

    code {
        color:     currentColor;
        font-size: 1em;
    }

    strong {
        //font-weight: normal;
    }
}

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

small {
    color:     prop(--colors --fg-hi);
    font-size: px-to-em(14px);
}

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

li {
    position:     relative;
    padding-left: prop(--dims --indent);

    &::before {
        display:     inline-block;
        position:    absolute;
        width:       prop(--dims --indent);
        margin-left: calc(-1 * #{prop(--dims --indent)});
        color:       prop(--colors --fg-hi);
    }
}

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 * 1rem) 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 {
    @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);

    margin:         ($line-height * 2rem) 0 0;
    color:          prop(--colors --fg-lo);
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;

    & + & {
        margin-top: $line-height * 1rem;
    }

    strong {
        color:       prop(--colors --accent --color, $global: true);
        font-weight: 550;
    }
}

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

:link,
:visited {
    color: prop(--colors --link --default);
}

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