$headings: (
    "1": (),
    "2": (
        "uppercase"
    ),
    "3": (
        "uppercase"
    ),
    "4": (
        "uppercase"
    ),
    "5": (),
    "6": (),
);

@each $i, $styles in $headings {
    h#{$i},
    .is-style-h#{$i} {
        @include heading(h#{$i});

        @each $style in $styles {
            &.is-style-#{$style} {
                @include heading(h#{$i}, $style);
            }
        }
    }

    .has-h-#{$i}-font-size {
        font-size: var(--font-size-h#{i});
    }
}

@mixin heading($name: h1, $style: default) {
    font-family: $font-family-primary;
    font-weight: 400;

    @if $name == h1 {
        font-size: var(--heading--font-size-h1);
        line-height: var(--heading--line-height-h1);
    }

    @if $name == h2 {
        font-size: var(--heading--font-size-h2);
        line-height: var(--heading--line-height-h2);

        @if $style == uppercase {
            text-transform: uppercase;
        }
    }

    @if $name == h3 {
        font-size: var(--heading--font-size-h3);
        line-height: var(--heading--line-height-h3);

        @if $style == uppercase {
            text-transform: uppercase;
        }
    }

    @if $name == h4 {
        font-size: var(--heading--font-size-h4);
        line-height: var(--heading--line-height-h4);

        @if $style == uppercase {
            text-transform: uppercase;
        }
    }

    @if $name == h5 {
        font-size: var(--heading--font-size-h5);
        line-height: var(--heading--line-height-h5);
    }

    @if $name == h6 {
        font-size: var(--heading--font-size-h6);
        line-height: var(--heading--line-height-h6);
    }
}