@mixin media-screen($name, $screen: $tab-screen) {
    @if $name == "xs" {
        @content;
    } @else if $name == "sm" {
        @media screen and (max-width: map_get($screen, "md")) {
            @content;
        }
    } @else {
        @media (min-width: map_get($screen, $name)) {
            @content;
        }
    }
}


// @mixin media-breakpoint-down($name, $screen: $tab-screen) {
//     $elt: map_get($screen, $name);

//     @if $elt != 0 {
//         @media (max-width: $elt) {
//             @content;
//         }
//     } 
// }

@mixin generate-color($tabs){
    @each $name, $colors in $tabs{

        @each $type, $value in $colors{
            @if $type == "base" {
                .#{$name} { --var-bg-color: #{$value} !important; }
                .t-#{$name} { --var-text-color: #{$value} !important; color: #{$value} !important; }
                .bg-#{$name} { background-color: #{$value} !important; }
            }
            @else {
                .#{$name}.#{$type} { --var-bg-color: #{$value} !important; }
                .t-#{$name}.t-#{$type} { color: #{$value} !important; --var-text-color: #{$value} !important; }
                .bg-#{$name}.bg-#{$type} { background-color: #{$value} !important; }
            }

        }
    }
}


@mixin make-spacing($name, $index, $value, $infix, $factor: 1) {
    $label: if($value != auto and $factor < 0, n#{$index}, $index);
    $value: if($value != auto, $factor * $value, $value);
    $spacing: map-get($map: $tab-spacing-name, $key: $name);

    .#{$infix}#{$name}-#{$label}{
        #{$spacing}: #{$value} !important;
    }

    .#{$infix}#{$name}x-#{$label}{
        #{$spacing}-left: #{$value} !important;
        #{$spacing}-right: #{$value} !important;
    }

    .#{$infix}#{$name}y-#{$label}{
        #{$spacing}-top: #{$value} !important;
        #{$spacing}-bottom: #{$value} !important;
    }

    @if ($value != auto) {
        @each $direction_infix, $direction_value in $tab-direction-name{
            .#{$infix}#{$name}#{$direction_infix}-#{$label}{
                #{$spacing}-#{$direction_value}: $value !important;
            }
        }
    }

}


@mixin space($value, $name: "margin", $direction: "all") {
    @if $direction == "horizontal" {
        #{$name}-right: #{$value};
        #{$name}-left: #{$value};
    } @else if $direction == "vertical" {
        #{$name}-top: #{$value};
        #{$name}-bottom: #{$value};
    } @else if $direction == "all" {
        #{$name}: #{$value};
    } @else {
        #{$name}-#{$direction}: #{$value};
    }
}

@mixin space-many($value1, $value2, $value3: none, $name: "margin") {
    @if $value3 != none {
        #{$name}: #{$value1} #{$value2} #{$value3};
    } @else {
        #{$name}: #{$value1} #{$value2};
    }
}


@mixin size($value, $type: "size") {
    @if $type == "size" {
        width: #{$value};
        height: #{$value};
    } @else {
        #{$type}: #{$value};
    }
}