@use 'functions' as fn;

@mixin set-font($basis, $values: ()) {
    $values: fn.set-font($basis, $values);

    @each $prop, $value in $values {
        @if $value != null {
            #{$prop}: $value;
        }
    }
}

@mixin heading-strong($size) {
    color:     fn.foreign-color(--heading, --strong);
    font-size: fn.global-dim(join(--heading, $size));
}

@mixin heading-medium($size) {
    @include set-font(--standard, (
        --line-height: null,
        --size:        $size,
        --weight:      bold,
        --transform:   uppercase,
        --spacing:     1px
    ));

    transform: none;
    color:     fn.foreign-color(--heading, --strong);
}

@mixin heading-faint($size) {
    @include set-font(--standard, (
        --line-height: null,
        --size:        $size,
        --weight:      500,
        --transform:   uppercase,
        --spacing:     1px
    ));

    transform: none;
    color:     fn.foreign-color(--heading, --light);
}