//RESPONSIVE MEDIA QUERIES
$device-small: "all and (max-width: 320px)";
$device-normal: "all and (min-width: 321px) and (max-width: 480px)";
$device-large: "all and (min-width: 481px) and (max-width: 768px)";
$device-xlarge: "all and (min-width: 769px)";
$portrait: "(orientation: portrait)";
$landscape: "(orientation: landscape)";
$res_2_3: "(device-aspect-ratio: 2/3)";
$res_3_4: "(device-aspect-ratio: 3/4)";
$res_min_512_685: "(min-aspect-ratio: 512/683)";    //iPad pro ratio
$iphone_6_plus_height: "736px";

$hd-width: "screen and (min-width: 1280px)";            //720p
$full-hd-width: "screen and (min-width: 1920px)";       //1080p
$wide-quad-hd: "screen and (min-width: 2560px)";        //1440p
$ultra-hd-width: "screen and (min-width: 3840px)";      //2160p

@mixin portrait {
    @media #{$portrait} {
        @content;
    }
}

@mixin landscape {
    @media #{$landscape} {
        @content;
    }
}

/******************* Generic web/mobile resolutions ******************/
@mixin small-mobile {
    @media #{$device-small} {
        @content;
    }
}

@mixin smartphone {
    @media #{$device-normal} {
        @content;
    }
}

@mixin tablet {
    @media #{$device-large} {
        @content;
    }
}

@mixin big-screen {
    @media #{$device-xlarge} {
        @content;
    }
}

@mixin hd {
    @media #{$hd-width} {
        @content;
    }
}

@mixin full-hd {
    @media #{$full-hd-width} {
        @content;
    }
}

@mixin wide-quad-hd {
    @media #{$wide-quad-hd} {
        @content;
    }
}

@mixin ultra-hd {
    @media #{$ultra-hd-width} {
        @content;
    }
}

.no-small-mobile {
    @include small-mobile {
        display: none !important;
    }
}

/******** USAGE EXAMPLE *********/
/*@include small-mobile {

    @media all and #{$res_2_3} {
    }
}
@include smartphone {

    @media all and (min-height: #{$iphone_6_plus_height}) {
    }
}
@include tablet {

    @media all and #{$res_3_4} {
    }
}
@include big-screen {

    @media all and #{$res_min_512_685} {
    }
}
@include hd {
}
@include full-hd {
}
@include wide-quad-hd {
}
@include ultra-hd {
}

@include small-mobile
@include smartphone
@include tablet
@include big-screen
@include hd
@include full-hd
@include wide-quad-hd
@include ultra-hd
*/

/******************* Common iOS resolutions *********************/
@mixin iphone-4 {
    @media screen and (width: 320px) and (height: 480px)
    {
        @content;
    }
}
@mixin iphone-5 {
    @media screen and (width: 320px) and (height: 568px)
    {
        @content;
    }
}
@mixin iphone-8 {
    @media screen and (width: 375px) and (height: 667px)
    {
        @content;
    }
}
@mixin iphone-8-plus {
    @media screen and (width: 414px) and (height: 736px)
    {
        @content;
    }
}
@mixin iphone-xs {
    @media screen and (width: 375px) and (height: 812px)
    {
        @content;
    }
}
@mixin iphone-xr {
    @media screen and (width: 414px) and (height: 896px)
    {
        @content;
    }
}
@mixin ipad {
    @media screen and (width: 768px) and (height: 1024px)
    {
        @content;
    }
}
@mixin ipad-pro {
    @media screen and (width: 1024px) and (height: 1366px)
    {
        @content;
    }
}

/****************** Common Android resolutions *******************/
    //Samsung
@mixin galaxy-s7 {
    @media screen and (width: 360px) and (height: 640px)
    {
        @content;
    }
}
@mixin galaxy-s9 {
    @media screen and (width: 360px) and (height: 740px)
    {
        @content;
    }
}
@mixin galaxy-s9-plus {
    @media screen and (width: 412px) and (height: 846px)
    {
        @content;
    }
}
    //Google
@mixin nexus-6p {
    @media screen and (width: 412px) and (height: 738px)
    {
        @content;
    }
}
@mixin pixel-xl {
    @media screen and (width: 411px) and (height: 731px)
    {
        @content;
    }
}
@mixin pixel-2 {
    @media screen and (width: 412px) and (height: 640px)
    {
        @content;
    }
}
@mixin pixel-2-xl {
    @media screen and (width: 411px) and (height: 823px)
    {
        @content;
    }

    @media screen and (width: 412px) and (height: 823px)
    {
        @content;
    }
}
@mixin pixel-3-xl {
    @media screen and (width: 393px) and (height: 786px)
    {
        @content;
    }
}
@mixin one-plus-3 {
    @media screen and (width: 480px) and (height: 853px)
    {
        @content;
    }
}
@mixin nexus-7 {
    @media screen and (width: 600px) and (height: 960px)
    {
        @content;
    }
}
@mixin galaxy-tab-10 {
    @media screen and (width: 800px) and (height: 1280px)
    {
        @content;
    }
}

    //Huawei
@mixin p20 {
    @media screen and (width: 360px) and (height: 748px)
    {
        @content;
    }
}
@mixin p20-pro {
    @media screen and (width: 360px) and (height: 747px)
    {
        @content;
    }
}
@mixin p20-lite {
    @media screen and (width: 360px) and (height: 760px)
    {
        @content;
    }
}

    //LG
@mixin k7 {
    @media screen and (width: 320px) and (height: 570px)
    {
        @content;
    }
}