/*
 * Typography
 */

body {
    .rems(14);
    font-family: @body_font;
    color: @text_color;

    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        display: flex;
    }
}

a {
    color: @highlight_color;
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

p {
    margin: 0 0 @margin;
}

small {
    .rems(13);
}

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: @primary_font;
    line-height: 1.2;
}

.headingStyle(@selector: h1) {

    & when (@selector = h1) {
        .rems(44);
        line-height: 1;
    }

    & when (@selector = h2) {
        .rems(36);
        line-height: 1.2;
    }

    & when (@selector = h3) {
        .rems(30);
        line-height: 1.2;
    }

    & when (@selector = h4) {
        .rems(24);
        line-height: 1.2;
    }

    & when (@selector = h5) {
        .rems(20);
        line-height: 1.2;
    }

    & when (@selector = h6) {
        .rems(16);
        line-height: 1.2;
    }
}

h1 {
    .headingStyle(h1);
}

h2 {
    .headingStyle(h2);
}

h3 {
    .headingStyle(h3);
}

h4 {
    .headingStyle(h4);
}

h5 {
    .headingStyle(h5);
}

h6 {
    .headingStyle(h6);
}