SCSS heading declarations

typography.scss

@import './src/library/core/variables';
@import './src/library/mixins/media-queries';
@import './src/library/mixins/rems';

@mixin text-light() {
    font-family: $font__base;
    font-weight: lighter;
    font-style: normal;
}
@mixin text-regular() {
    font-family: $font__base;
    font-weight: normal;
    font-style: normal;
}
@mixin text-bold() {
    font-family: $font__base;
    font-weight: bold;
    font-style: normal;
}
// sass-lint:disable mixins-before-declarations
@mixin header($heading-level) {
    margin: $zero;
    padding: $zero;
    $font-size: $base-font-size-px !default;
    $font-size--medium: 0 !default;
    $line-height: 1.5 !default;
    color: currentColor;

    @if ($heading-level == 'h1') {
        $font-size: 30px;
        $font-size--medium: 55px;
        $line-height: 1;
        text-transform: uppercase;
        @include text-light();

    } @else if ($heading-level == 'h2') {
        $font-size: 30px;
        $font-size--medium: 40px;
        $line-height: 1;
        @include text-light();

    } @else if ($heading-level == 'h3') {
        $font-size: 24px;
        $font-size--medium: 30px;
        @include text-regular();

    } @else if ($heading-level == 'h4') {
        $font-size: 20px;
        @include text-regular();

    } @else if ($heading-level == 'h5') {
        $font-size: 18px;
        @include text-bold();

    } @else if ($heading-level == 'h6') {
        @include text-bold();
    }

    @include rem(font-size, $font-size);
    line-height: $line-height;

    @if $font-size--medium != 0 {
        @media #{$mq-vp__medium} {
            @include rem(font-size, $font-size--medium);
        }
   }
}
// sass-lint:enable mixins-before-declarations

@mixin paragraph() {
    @include rem(font-size, 18px);
    @include vertical-spacing(margin-bottom, 1);
    margin-top: $zero;
    padding: $zero;
    color: currentColor;
    font-family: $font__base;
    font-style: normal;
    font-weight: normal;
    line-height: 1.5;
}

@mixin text-small() {
    font-size: 75%;
}