/* This file is for mixins only */
@use "sass-rem/rem" as sass-rem;

@mixin font-source($font-family, $size, $color: false, $weight: false, $lh: false) {
    font-family: $font-family;
    font-size: $size  !important;

    @if $color {
        color: $color  !important;
    }

    @if $weight {
        font-weight: $weight  !important;
    }

    @if $lh {
        line-height: $lh  !important;
    }
}

@mixin placeholder {
    @include font-source(var(--font-family-regular), var(--font-size-base), var(--light17));
}


// Font mixins work like so [family][size][color modifier](-transparency modifier)

// LIGHT
@mixin light13light16 {
    @include font-source(var(--font-family-light), var(--font-size-base), var(--light16));
}

@mixin light14light16 {
    @include font-source(var(--font-family-light), var(--h5-font-size), var(--light16));
}

@mixin light15light16 {
    @include font-source(var(--font-family-light), var(--h4-font-size), var(--light16));
}

@mixin light18light16 {
    @include font-source(var(--font-family-light), var(--h3-font-size), var(--light16));
}

@mixin light18light10 {
    @include font-source(var(--font-family-light), var(--h3-font-size), var(--light10));
}

@mixin light40light10 {
    @include font-source(var(--font-family-light), var(--font-size-xxxlg), var(--light10));
}

// LIGHT

// REGULAR
@mixin regular11error {
    @include font-source(var(--font-family-regular), var(--font-size-xsm), var(--error));
}

@mixin regular11dark9 {
    @include font-source(var(--font-family-regular), var(--font-size-xsm), var(--dark9));
}

@mixin regular11nocolor {
    @include font-source(var(--font-family-regular), var(--font-size-xsm), false, 400);
}

@mixin regular11light16 {
    @include font-source(var(--font-family-regular), var(--font-size-xsm), var(--light16));
}

@mixin regular12nocolor {
    @include font-source(var(--font-family-regular), var(--font-size-sm));
}

@mixin regular12light {
    @include font-source(var(--font-family-regular), var(--font-size-sm), var(--light16));
}

@mixin regular12light16 {
    @include font-source(var(--font-family-regular), var(--font-size-sm), var(--light16));
}

@mixin regular12nocolor {
    @include font-source(var(--font-family-regular), var(--font-size-sm), false, 400);
}

@mixin regular13dark9 {
    @include font-source(var(--font-family-regular), var(--font-size-base), var(--dark9));
}

@mixin regular13nocolor {
    @include font-source(var(--font-family-regular), var(--font-size-base), false, 400);
}

@mixin regular13light {
    @include font-source(var(--font-family-regular), var(--font-size-base), var(--light16));
}

@mixin regular13light8 {
    @include font-source(var(--font-family-regular), var(--font-size-base), var(--light8));
}

@mixin regular13light10 {
    @include font-source(var(--font-family-regular), var(--font-size-base), var(--light10));
}

@mixin regular14light10 {
    @include font-source(var(--font-family-regular), var(--h5-font-size), var(--light10));
}

@mixin regular14dark9 {
    @include font-source(var(--font-family-regular), var(--h5-font-size), var(--dark9));
}

@mixin regular14nocolor {
    @include font-source(var(--font-family-regular), var(--h5-font-size), false, 400);
}

@mixin regular14dark9lh16 {
    @include font-source(var(--font-family-regular), var(--h6-font-size), var(--dark9), false, sass-rem.rem(16px));
}

@mixin regular14dark9lh16 {
    @include font-source(var(--font-family-regular), var(--h6-font-size), var(--dark9), false, sass-rem.rem(16px));
}

@mixin regular14dark10 {
    @include font-source(var(--font-family-regular), var(--h5-font-size), var(--dark10));
}

@mixin regular11light7 {
    @include font-source(var(--font-family-regular), var(--h5-font-size), var(--light7));
}

@mixin regular15light {
    @include font-source(var(--font-family-regular), var(--h4-font-size), var(--light16));
}

@mixin regular15nocolor {
    @include font-source(var(--font-family-regular), var(--h4-font-size), false, 400);
}

@mixin regular16light1 {
    @include font-source(var(--font-family-regular), sass-rem.rem(16px), var(--light1));
}

@mixin regular16nocolor {
    @include font-source(var(--font-family-regular), sass-rem.rem(16px), false, 400);
}

@mixin regular18nocolor {
    @include font-source(var(--font-family-regular), var(--h3-font-size), false, 400);
}

@mixin regular20nocolor {
    @include font-source(var(--font-family-regular), sass-rem.rem(20px), false, 400);
}

@mixin regular24dark9 {
    @include font-source(var(--font-family-regular), var(--font-size-xlg), var(--dark9));
}

@mixin regular24nocolor {
    @include font-source(var(--font-family-regular), var(--font-size-xlg), false, 400);
}

@mixin regular30nocolor {
    @include font-source(var(--font-family-regular), sass-rem.rem(30px), false, 400);
}

// REGULAR

// MEDIUM
@mixin medium11light1 {
    @include font-source(var(--font-family-medium), sass-rem.rem(11px), var(--light1));
}

@mixin medium11nocolor {
    @include font-source(var(--font-family-medium), sass-rem.rem(11px), false, 500);
}

@mixin medium12nocolor {
    @include font-source(var(--font-family-medium), var(--font-size-sm), false, 500);
}

@mixin medium13dark10 {
    @include font-source(var(--font-family-medium), var(--font-size-base), var(--dark10));
}

@mixin medium13dark9 {
    @include font-source(var(--font-family-medium), var(--font-size-base), var(--dark9));
}

@mixin medium13dark15 {
    @include font-source(var(--font-family-medium), var(--font-size-base), var(--dark15));
}

@mixin medium13nocolor {
    @include font-source(var(--font-family-medium), var(--font-size-base), false, 500);
}

@mixin medium22dark9lh24 {
    @include font-source(var(--font-family-medium), sass-rem.rem(22px), var(--dark9), false, sass-rem.rem(24px));
}

@mixin medium14dark9 {
    @include font-source(var(--font-family-medium), var(--h5-font-size), var(--dark9));
}

@mixin medium14nocolor {
    @include font-source(var(--font-family-medium), var(--h5-font-size), false, 500);
}

@mixin medium14light1 {
    @include font-source(var(--font-family-medium), var(--h5-font-size), var(--light1));
}

@mixin medium14light16 {
    @include font-source(var(--font-family-medium), var(--h5-font-size), var(--light16));
}

@mixin medium15dark9 {
    @include font-source(var(--font-family-medium), var(--h4-font-size), var(--dark9));
}

@mixin medium15nocolor {
    @include font-source(var(--font-family-medium), var(--h4-font-size), false, 500);
}

@mixin medium15dark17 {
    @include font-source(var(--font-family-medium), var(--h4-font-size), var(--dark17));
}

@mixin medium16nocolor {
    @include font-source(var(--font-family-medium), sass-rem.rem(16px), false, 500);
}

@mixin medium16dark9 {
    @include font-source(var(--font-family-medium), sass-rem.rem(16px), var(--dark9));
}

@mixin medium17dark9 {
    @include font-source(var(--font-family-medium), sass-rem.rem(17px), var(--dark9));
}

@mixin medium18nocolor {
    @include font-source(var(--font-family-medium), var(--h3-font-size), false, 500);
}

@mixin medium20nocolor {
    @include font-source(var(--font-family-medium), sass-rem.rem(20px));
}

@mixin medium24dark9 {
    @include font-source(var(--font-family-medium), var(--font-size-xlg), var(--dark9));
}

@mixin medium24light1 {
    @include font-source(var(--font-family-medium), var(--font-size-xlg), var(--light1));
}

@mixin medium24nocolor {
    @include font-source(var(--font-family-medium), var(--font-size-xlg), false, 500);
}

@mixin medium32nocolor {
    @include font-source(var(--font-family-medium), var(--font-size-xxlg), false, 500);
}

// MEDIUM

// BOLD
@mixin bold10dark3 {
    @include font-source(var(--font-family-bold), sass-rem.rem(10px), var(--dark3));
}

@mixin bold13dark9nocolor {
    @include font-source(var(--font-family-bold), var(--font-size-base), false, 700);
}

@mixin bold14nocolor {
    @include font-source(var(--font-family-bold), sass-rem.rem(14px), false, 700);
}

@mixin bold16nocolor {
    @include font-source(var(--font-family-bold), sass-rem.rem(16px), false, 700);
}

// BOLD
