///* ========================================================================
//   #TOOLS-TYPOGRAPHY
//   ======================================================================== */

@mixin typography($type) {
    @if $type == 'caption' {
        @include font-size(12px);
        font-weight: 400;
    }

    @if $type == 'body-1' or $type == 'body-2' {
        @include mq($until: desktop) {
            @include font-size(14px);
        }

        @include mq($from: desktop) {
            @include font-size(13px);
        }
    }

    @if $type == 'body-1' {
        font-weight: 400;
        line-height: 20px;
    }

    @if $type == 'body-2' {
        font-weight: 500;
        line-height: 24px;
    }

    @if $type == 'subheading-1' or $type == 'subheading-2' {
        font-weight: 400;

        @include mq($until: desktop) {
            @include font-size(16px);
        }

        @include mq($from: desktop) {
            @include font-size(15px);
        }
    }

    @if $type == 'subheading-1' {
        line-height: 24px;
    }

    @if $type == 'subheading-2' {
        line-height: 28px;
    }

    @if $type == 'title' {
        @include font-size(20px);
        font-weight: 500;
    }

    @if $type == 'headline' {
        @include font-size(24px);
        font-weight: 400;
        line-height: 32px;
    }

    @if $type == 'display-1' {
        @include font-size(34px);
        font-weight: 400;
        line-height: 40px;
    }

    @if $type == 'display-2' {
        @include font-size(45px);
        font-weight: 400;
        line-height: 48px;
        letter-spacing: -1px;
    }

    @if $type == 'display-3' {
        @include font-size(56px);
        font-weight: 400;
        letter-spacing: -2px;
    }

    @if $type == 'display-4' {
        @include font-size(112px);
        font-weight: 300;
        letter-spacing: -5px;
    }
}