@use "sass:map";
@use "../theme";
@use "util";

.base {
    color: map.get(theme.$base, "font-color");
    font: map.get(theme.$base, "font-size") map.get(theme.$base, "font");
    margin: 0;

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    p {
        line-height: map.get(theme.$base, "line-height");
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 400;
    }

    h1 {
        font-size: 2.441em;
    }

    h2 {
        font-size: 1.953em;
    }

    h3 {
        font-size: 1.563em;
    }

    h4 {
        font-size: 1.25em;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.8em;
    }

    a {
        @extend .anchor;
    }
}

.rtl {
    direction: rtl;
    unicode-bidi: embed;
}

.modern {
    color: map.get(theme.$base, "font-color");
    font: map.get(theme.$base, "font-size") map.get(theme.$base, "font");
    margin: 0;

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    p {
        font-size: 1.05em;
        line-height: map.get(theme.$base, "line-height");
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 300;
    }

    h1 {
        font-size: 2.6179em;
    }

    h2 {
        font-size: 2.0581em;
    }

    h3 {
        font-size: 1.618em;
    }

    h4 {
        font-size: 1.272em;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.7862em;
    }

    a {
        @extend .anchor;
    }
}
