// Mixin to generate css variables 
// If the variable has no prefix, don't assign anything to the $prefix attribute, leave its default value: “”
@mixin generate-css-variables($map, $prefix: "") {
    @if $prefix == "" {
        @each $name, $value in $map {
            --#{$name}: #{$value};
        }
    } @else {
        @each $name, $value in $map {
            --#{$prefix}-#{$name}: #{$value};
        }
    } 
}

// Mixin to generate typography css classes
@mixin generate-typo-class($prefix, $name, $map) {
    .#{$prefix}-#{$name} {
        @each $key, $value in $map {
            @if $key == "family" {
                font-family: $value;
            }   @else if $key == "size" {
                font-size: $value;
            }   @else if $key == "weight" {
                font-weight: $value;
            }   @else if $key == "line-height" {
                line-height: $value;
            }   @else if $key == "style" {
                font-style: $value;
            }   @else if $key == "text-transform" {
                text-transform: $value;
            }   @else if $key == "text-decoration" {
                text-decoration: $value;
            }
        }
    }
}