@h1__margin-bottom__desktop: @h1__margin-bottom;
@h2__margin-bottom__desktop: @h2__margin-bottom;
@h3__margin-bottom__desktop: @h3__margin-bottom;
@h4__margin-bottom__desktop: @h4__margin-bottom;
@h5__margin-bottom__desktop: @h5__margin-bottom;
@h6__margin-bottom__desktop: @h6__margin-bottom;
@h1__margin-top__desktop: @h1__margin-top;
@h2__margin-top__desktop: @h2__margin-top;
@h3__margin-top__desktop: @h3__margin-top;
@h4__margin-top__desktop: @h4__margin-top;
@h5__margin-top__desktop: @h5__margin-top;
@h6__margin-top__desktop: @h6__margin-top;
@margin-top-block__extra: 1.5;
@h1__margin-top-block: 0;
@h2__margin-top-block: @h2__margin-bottom * @margin-top-block__extra;
@h3__margin-top-block: @h3__margin-bottom * @margin-top-block__extra;
@h4__margin-top-block: @h4__margin-bottom * @margin-top-block__extra;
@h5__margin-top-block: @h5__margin-bottom * @margin-top-block__extra;
@h6__margin-top-block: @h6__margin-bottom * @margin-top-block__extra;
@h1__margin-top-block__desktop: @h1__margin-top-block;
@h2__margin-top-block__desktop: @h2__margin-top-block;
@h3__margin-top-block__desktop: @h3__margin-top-block;
@h4__margin-top-block__desktop: @h4__margin-top-block;
@h5__margin-top-block__desktop: @h5__margin-top-block;
@h6__margin-top-block__desktop: @h6__margin-top-block;
@h2__font-size-desktop: @h2__font-size;
@h3__font-size-desktop: @h3__font-size;
@h4__font-size-desktop: @h4__font-size;
@h5__font-size-desktop: @h5__font-size;
@h6__font-size-desktop: @h6__font-size;
@h1__text-transform: none;
@h1__text-transform__desktop: @h1__text-transform;
@h2__text-transform: none;
@h2__text-transform__desktop: @h2__text-transform;
@h3__text-transform: none;
@h3__text-transform__desktop: @h3__text-transform;
@h4__text-transform: none;
@h4__text-transform__desktop: @h4__text-transform;
@h5__text-transform: none;
@h5__text-transform__desktop: @h5__text-transform;
@h6__text-transform: none;
@h6__text-transform__desktop: @h6__text-transform;
@h1__inline-link-text-decoration: none;
@h2__inline-link-text-decoration: none;
@h3__inline-link-text-decoration: none;
@h4__inline-link-text-decoration: none;
@h5__inline-link-text-decoration: none;
@h6__inline-link-text-decoration: none;
@default__letter-spacing: normal;
@h1__letter-spacing: normal;
@h1__letter-spacing__desktop: @h1__letter-spacing;
@h2__letter-spacing: normal;
@h2__letter-spacing__desktop: @h2__letter-spacing;
@h3__letter-spacing: normal;
@h3__letter-spacing__desktop: @h3__letter-spacing;
@h4__letter-spacing: normal;
@h4__letter-spacing__desktop: @h4__letter-spacing;
@h5__letter-spacing: normal;
@h5__letter-spacing__desktop: @h5__letter-spacing;
@h6__letter-spacing: normal;
@h6__letter-spacing__desktop: @h6__letter-spacing;
@blockquote__letter-spacing: normal;
@blockquote__font-family: @font-family__base;

// Extra styling for headings
// Override existing lib-heading gave an error in _reset.less for some reason

.lib-heading-extra(@_heading_level: h1) {
    @_text-transform: "@{_heading_level}__text-transform";
    @_letter-spacing: "@{_heading_level}__letter-spacing";
    @_inline-link-text-decoration: "@{_heading_level}__inline-link-text-decoration";
    @_margin-top-block: "@{_heading_level}__margin-top-block";

    & {
        .lib-css(text-transform, @@_text-transform);
    }

    & {
        .lib-css(letter-spacing, @@_letter-spacing);
    }

    p + &,
    ul + &,
    ol + &,
    blockquote + &{
        .lib-css(margin-top, @@_margin-top-block);
    }


    //Inline link text decoration
    a {
        .lib-css(text-decoration, @@_inline-link-text-decoration);
    }
}

.lib-heading-desktop(@_heading_level: h1) {
    @_font-size: "@{_heading_level}__font-size-desktop";
    @_line-height: "@{_heading_level}__line-height";
    @_margin-top: "@{_heading_level}__margin-top__desktop";
    @_margin-top-block: "@{_heading_level}__margin-top-block__desktop";
    @_margin-bottom: "@{_heading_level}__margin-bottom__desktop";
    @_text-transform: "@{_heading_level}__text-transform__desktop";
    @_letter-spacing: "@{_heading_level}__letter-spacing__desktop";

    & {
        .lib-css(font-size, @@_font-size);
    }

    & {
        .lib-css(line-height, @@_line-height);
    }

    & {
        .lib-css(margin-top, @@_margin-top);
    }

    & {
        .lib-css(margin-bottom, @@_margin-bottom);
    }

    & {
        .lib-css(text-transform, @@_text-transform);
    }

    & {
        .lib-css(letter-spacing, @@_letter-spacing);
    }

    p + &,
    ul + &,
    ol + &,
    blockquote + &{
        .lib-css(margin-top, @@_margin-top-block);
    }

}




//
//  Common
//  _____________________________________________

& when (@media-common = true) {

    html{
        /* Smoothing */
        -webkit-font-smoothing: antialiased; /* Chrome, Safari */
        -moz-osx-font-smoothing: grayscale; /* Firefox */
    }

    body {
        letter-spacing: @default__letter-spacing;
    }

    // make sure we can use .hx classes to avoid seo specialist chenanigans
    .h1 { .lib-heading(h1); }
    .h2 { .lib-heading(h2); }
    .h3 { .lib-heading(h3); }
    .h4 { .lib-heading(h4); }
    .h5 { .lib-heading(h5); }
    .h6 { .lib-heading(h6); }

    h1, .h1 {
        .lib-heading-extra(h1);
    }

    h2, .h2 {
        .lib-heading-extra(h2);
    }

    h3, .h3 {
        .lib-heading-extra(h3);
    }

    h4, .h4 {
        .lib-heading-extra(h4);
    }

    h5, .h5 {
        .lib-heading-extra(h5);
    }

    h6, .h6 {
        .lib-heading-extra(h6);
    }

    blockquote {
        font-family: @blockquote__font-family;
        letter-spacing: @blockquote__letter-spacing;
    }

    ul, ol{
        ul, ol{
            margin-top: @list-item__margin-bottom;
        }
    }

}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {

}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {

}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {

}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {


    h1, .h1 {
        .lib-heading-desktop(h1);
    }

    h2, .h2 {
        .lib-heading-desktop(h2);
    }

    h3, .h3 {
        .lib-heading-desktop(h3);
    }

    h4, .h4 {
        .lib-heading-desktop(h4);
    }

    h5, .h5 {
        .lib-heading-desktop(h5);
    }

    h6, .h6 {
        .lib-heading-desktop(h6);
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {

}
