// for-at-least-tablets is used for all tablets and desktops
// this should be used whenever something is similar in tablets/desktop and different in mobile

// also print always gets whatever desktop gets by default
// (ie. "for-at-least-tablets", "for-at-least-normal-tablets" and "for-desktops" rules)

@mixin for-at-least-tablets
{
    @media all and (min-width: #{$window-breakpoint-small-tablet}), print
    {
        @content;
    }
}

@mixin for-at-least-normal-tablets
{
    @media all and (min-width: #{$window-breakpoint-normal-tablet}), print
    {
        @content;
    }
}


// for-desktops should be used for the full page layout
@mixin for-desktops
{
    @media all and (min-width: #{$window-breakpoint-small-desktop}), print
    {
        @content;
    }
}

// for-normal-desktops should only be used in cases where there are differences for smaller desktops
@mixin for-normal-desktops
{
    @media all and (min-width: #{$window-breakpoint-normal-desktop}), print
    {
        @content;
    }
}


// in some exceptions a direct pixel value can be used
@mixin for-at-least( $width )
{
    @media all and (min-width: $width), print
    {
        @content;
    }
}

@mixin for-between( $min-width, $max-width )
{
    @media all and (min-width: $min-width) and (max-width: $max-width)
    {
        @content;
    }
}


// for-phones mixin should mostly not be used at all
// because the mobile layout is the default one
// but in some rare cases where the mobile-first approach is not appropriate
// this can be used to target the compact layout specifically
@mixin for-phones
{
    @media all and (max-width: #{$window-breakpoint-small-tablet - 1px})
    {
        @content;
    }
}

// for edge cases with very narrow screens
@mixin for-small-phones
{
    @media all and (max-width: #{$window-breakpoint-normal-phone - 1px})
    {
        @content;
    }
}

@mixin for-tablets
{
    @include for-between( $window-breakpoint-small-tablet, $window-breakpoint-small-desktop - 1 )
    {
        @content;
    }
}

@mixin for-small-tablets
{
    @include for-between( $window-breakpoint-small-tablet, $window-breakpoint-normal-tablet - 1 )
    {
        @content;
    }
}

@mixin for-normal-tablets
{
    @include for-between( $window-breakpoint-normal-tablet, $window-breakpoint-small-desktop - 1 )
    {
        @content;
    }
}


// for rare occasions where an overriding rule is needed only for phones and tablets
// and doing it the mobile-first way would cause a lot of dirty code when restoring
// the original values back for dekstops
@mixin for-at-most-tablets
{
    @media all and (max-width: #{$window-breakpoint-small-desktop - 1px})
    {
        @content;
    }
}

@mixin for-at-most-small-tablets
{
    @media all and (max-width: #{$window-breakpoint-normal-tablet - 1px})
    {
        @content;
    }
}


@mixin for-at-most( $max-width )
{
    @media all and (max-width: #{$max-width})
    {
        @content;
    }
}



// print also has its own mixin
@mixin for-print
{
    @media print
    {
        @content;
    }
}


@mixin for-hover-devices
{
    // some laptops have touch screens
    // but need hover animations

    // therefore, include this for content for
    // all non-touch devices
    // and touch devices with large screens

    html:not(.touch-device) &
    {
        @content;
    }

    @include for-desktops
    {
        html.touch-device &
        {
            @content;
        }
    }


}




