@use 'sass:color';
@use './function' as *;
@use './mixin';

@mixin roolith-typography() {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        font-weight: var(--r-global-font-bold-weight);
    }

    h1,
    .h1 {
        font-size: rem(32);
        line-height: rem(38);
        letter-spacing: -0.04em;

        @include mixin.breakpoint(large-up) {
            font-size: rem(52);
            line-height: rem(56);
        }
    }

    h2,
    .h2 {
        font-size: rem(28);
        line-height: rem(34);
        letter-spacing: -0.04em;

        @include mixin.breakpoint(large-up) {
            font-size: rem(42);
            line-height: rem(48);
        }
    }

    h3,
    .h3 {
        font-size: rem(24);
        line-height: rem(32);
        letter-spacing: -0.04em;

        @include mixin.breakpoint(large-up) {
            font-size: rem(36);
            line-height: rem(42);
        }
    }

    h4,
    .h4 {
        font-size: rem(22);
        line-height: rem(28);
        letter-spacing: -0.04em;

        @include mixin.breakpoint(large-up) {
            font-size: rem(32);
            line-height: rem(38);
        }
    }

    h5,
    .h5 {
        font-size: rem(18);
        line-height: rem(22);
        letter-spacing: -0.02em;

        @include mixin.breakpoint(large-up) {
            font-size: rem(22);
            line-height: rem(28);
        }
    }

    h6,
    .h6 {
        font-size: rem(16);
        line-height: rem(20);
        letter-spacing: -0.02em;
    }

    p {
        font-size: rem(14);
        line-height: rem(22);
    }

    strong {
        font-weight: var(--r-global-font-bold-weight);
    }

    em {
        font-style: italic;
    }

    a {
        color: var(--r-color-link);

        &:hover {
            color: var(--r-color-primary);
        }
    }

    u {
        text-decoration: underline;
    }

    small,
    .small {
        font-size: 80%;
        line-height: 1.3em;
    }

    code {
        font-family: Consolas, monaco, monospace;
        padding: rem(2) rem(5);
        margin: 0 rem(2);
        font-size: 90%;
        white-space: nowrap;
        background: var(--r-color-light-darken-5);
        border: rem(1) solid var(--r-color-light-darken-10);
        border-radius: rem(3);
        overflow: auto;
        @include mixin.nice-scroll();
    }

    .dimmed {
        opacity: 0.6;
    }

    .list {
        font-size: rem(14);
        line-height: rem(22);
        padding: rem(25) 0;
        margin-left: rem(15);

        li {
            list-style: disc;
            padding-bottom: rem(10);
        }

        ul,
        ol {
            margin: rem(10) 0 0 rem(30);
        }
    }

    .list-numbered {
        @extend .list;

        li {
            list-style: decimal;
        }
    }

    pre {
        code {
            padding: rem(15);
            display: block;
            white-space: pre;
            font-size: rem(14);
            background: var(--r-code-background);
            box-shadow: rgba(102, 119, 136, 0.2) 0 rem(1) rem(2) 0;
            border: none;
            line-height: rem(22);
            margin-bottom: rem(20);
            color: var(--r-code-color);
        }
    }

    hr {
        border: 0;
        height: 0;
        border-top: rem(1) solid var(--r-color-light-darken-5);
        border-bottom: rem(1) solid rgba(var(--r-color-white), 0.3);
        margin: rem(15) 0;
    }

    dl {
        font-size: rem(14);
        line-height: rem(22);
    }

    dt {
        font-weight: var(--r-global-font-bold-weight);
        padding: 0 0 rem(5);
    }

    dd {
        padding: 0 0 rem(15);

        &:last-child {
            padding-bottom: 0;
        }

        .indented-list & {
            padding-left: rem(30);
        }
    }

    blockquote {
        font-size: rem(14);
        line-height: rem(22);
        border-left: rem(3) solid var(--r-color-light-darken-5);
        padding-left: rem(20);

        cite {
            &:before {
                content: ' — ';
            }

            font-size: 80%;
            display: block;
            padding-top: rem(10);
        }
    }

    abbr {
        border-bottom: rem(1) dotted var(--r-color-dark-lighten-30);
        cursor: help;
        text-decoration: none;
    }

    kbd {
        @extend code;
        background: var(--r-color-light);
        border: rem(1) solid var(--r-color-light);
    }

    .full-width {
        width: 100%;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
}