//MEDIA QUERY MANAGER

/*
0 - 600: Phone
600 - 900: Tablet portrait
900 - 1200: Tablet landscape
1200 - 1800: Normal styles
1800+ : Big Desktop
1em = 16px
The smaller device rules always should write below the bigger device rules
Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
*/

@mixin respond($breakpoint) {

	@if($breakpoint == "phone") { 

		@media only screen and (max-width: 575px) { @content; } 
    } 
    
    @if($breakpoint == "phone-land") {

        @media only screen and (max-width: 767px) { @content; }
    }

	@if($breakpoint == "tab-port") {

		@media only screen and (max-width: 991px) { @content; } 
	}

	@if($breakpoint == "tab-land") {

		@media only screen and (max-width: 1199px) { @content; } 
    }
    
    @if ($breakpoint == "desktop") {
        
        @media only screen and (min-width: 1200px) { @content; }
    }
	
	@if($breakpoint == "big-desktop") {

		@media only screen and (min-width: 1800px) { @content; } 
	}

}



//don't use it untill you need this too much
@mixin custommq($min: null, $max: null) {
    @if ($min != null and $max != null) {
        @media only screen and (min-width: $min) and (max-width: $max) { @content; }
    }

    @if ($min == null and $max != null) {
        @media only screen and (max-width: $max) { @content; }
    }

    @if ($min != null and $max == null) {
        @media only screen and (min-width: $min) { @content; }
    }
}