@use "sass:map";

@mixin flex($alignItem, $justifyContent) {
    display: flex;
    align-items: $alignItem;
    justify-content: $justifyContent;
}

@mixin grid($loop, $num) {
    display: grid;
    grid-template-columns: repeat($loop, $num);
}

@mixin transformScale {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

@mixin topcenter() {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

@mixin center() {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin wh-full() {
    width: 100%;
    height: 100%;
}

// --------------------------
@mixin transition3 () {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@mixin transition4 () {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

@mixin transition5 () {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@mixin transition6 () {
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

@mixin hidden {
    opacity: 0;
    visibility: hidden;
}

@mixin visible {
    opacity: 1;
    visibility: visible;
}

// Responsive
$breakpoints: (
    "ssm": 425px,
    "sm": 575px,
    "md": 767px,
    "lg": 991px,
    "llg": 1024px,
    "xl": 1199px,
    "xxl": 1439px,
    "xxxl": 1599px,
    "full": 1920px
);

$breakpoints-min: (
    "ssm": 426px,
    "sm": 576px,
    "md": 768px,
    "lg": 992px,
    "llg": 1025px,
    "xl": 1200px,
    "xxl": 1440px,
    "xxxl": 1600px,
    "full": 1921px
);

@mixin res($size, $type: max, $size2: null) {
    @if $type==max {
        $breakpoint: map.get($breakpoints, $size);

        @if $breakpoint {
            @media (max-width: $breakpoint) {
                @content;
            }
        }
    }

    @else if $type==min {
        $breakpoint: map.get($breakpoints-min, $size);

        @if $breakpoint {
            @media (min-width: $breakpoint) {
                @content;
            }
        }
    }

    @else if $type==between and $size2 !=null {
        /*-- min, between, max --*/
        $min: map.get($breakpoints-min, $size);
        $max: map.get($breakpoints, $size2);

        @if $min and $max {
            @media (min-width: $min) and (max-width: $max) {
                @content;
            }
        }
    }
}