// @import "./variables";

//  ---------------------------------------------------------------------------
//
//  TYPOGRAPHY
//
//  ---------------------------------------------------------------------------


@mixin dc-html {
    height: 100%;
    font-family: $dc-base-font-family;
    font-size: $dc-html-font-size;
    font-weight: $dc-normal-font-weight;
    line-height: $dc-html-line-height;
}

@mixin dc-body {
    background: $dc-body-background-color;
    color: $dc-text-color;
    font-size: $dc-body-font-size;
    line-height: $dc-body-line-height;
}

@mixin dc-html-selectors {
    html {
        @include dc-html;
    }
}

@mixin dc-body-selectors {
    body {
        @include dc-body;
    }
}

@mixin dc-box-sizing {
    * {
        box-sizing: border-box;
    }
}

@mixin dc-vertical-rhythm {
    margin: 0;
    margin-bottom: $dc-space150;
}

@mixin dc-vertical-rhythm-selectors {
    .dc-h1,
    .dc-h2,
    .dc-h3,
    .dc-h4,
    .dc-h5,
    .dc-h6,
    .dc-hgroup,
    .dc-list,
    .dc-dd,
    .dc-p,
    .dc-figure,
    .dc-object,
    .dc-pre,
    .dc-table,
    .dc-fieldset,
    .dc-hr {
        @include dc-vertical-rhythm;
    }
}

@mixin dc-pre {
    // undo reset
    word-wrap: normal;
}

@mixin dc-pre-selectors {
    .dc-pre {
        @include dc-pre;
    }
}

@mixin dc-selection {
    background-color: $dc-secondary-accent;
    color: $dc-white;
}

@mixin dc-selection-selectors {
    // scss-lint:disable VendorPrefix
    ::-webkit-selection {
        @include dc-selection;
    }

    ::-moz-selection {
        @include dc-selection;
    }

    ::selection {
        @include dc-selection;
    }
    // scss-lint:enable VendorPrefix
}

@mixin dc-strong {
    font-weight: $dc-bold-font-weight;
}

@mixin dc-strong-selectors {
    .dc-strong {
        @include dc-strong;
    }
}

@mixin dc-em {
    font-style: italic;
}

@mixin dc-em-selectors {
    .dc-em {
        @include dc-em;
    }
}



//  = HEADINGS
//  ---------------------------------------------------------------------------

@mixin dc-heading-base($small-selector : ".dc-small") {
    margin-bottom: $dc-space150;
    color: $dc-headings-color;
    font-family: $dc-headings-font-family;
    font-weight: $dc-headings-font-weight;

    #{$small-selector} {
        display: block;
        color: $dc-gray50;
        font-family: $dc-base-font-family;
        font-size: 60%;
    }

    @content;
}

@mixin dc-heading($font-size, $line-height, $small-selector: ".dc-small") {
    @include dc-heading-base($small-selector);
    font-size: $font-size;
    line-height: $line-height;
}

@mixin dc-h1 {
    @include dc-heading($dc-h1-size, $dc-h1-line-height);
}

@mixin dc-h2 {
    @include dc-heading($dc-h2-size, $dc-h2-line-height);
}

@mixin dc-h3 {
    @include dc-heading($dc-h3-size, $dc-h3-line-height);
}

@mixin dc-h4 {
    @include dc-heading($dc-h4-size, $dc-h4-line-height);
}

@mixin dc-h4 {
    @include dc-heading($dc-h4-size, $dc-h4-line-height);
}

%dc-h1 { @include dc-h1; }
%dc-h2 { @include dc-h2; }
%dc-h3 { @include dc-h3; }
%dc-h4 { @include dc-h4; }

@mixin dc-heading-selectors {
    .dc-h1 {
        @include dc-h1;
    }

    .dc-h2 {
        @include dc-h2;
    }

    .dc-h3 {
        @include dc-h3;
    }

    .dc-h4 {
        @include dc-h4;
    }
}

@mixin dc-typography-selectors {
    @include dc-box-sizing;
    @include dc-html-selectors;
    @include dc-body-selectors;
    @include dc-vertical-rhythm-selectors;
    @include dc-pre-selectors;
    @include dc-selection-selectors;
    @include dc-strong-selectors;
    @include dc-em-selectors;
    @include dc-heading-selectors;
}