// Stylus Media Queries
// ====================
//
// A library of utilities for working with media queries.
//
// Copyright (c) 2015 Nick Zarczynski <nick@unb.services>
// License: MIT
// Version: 0.0.1
//


// Sizes
// =====

$screen = {
    // Size is defined by the screen's *minimum* width.

    // No known devices
    //
    xxxs:   0px,
    xxxs-max: 319px,

    // Small phone (iPhone 4/5 @320)
    //
    xxs:  320px,
    xxs-max: 359px,

    // Medium phone (lots of phones @360, iPhone 6 @375)
    //
    xs:   360px,
    xs-max: 413px,

    // Large phone (iPhone 6P @414, Nexus 6P @435 & 5P @411)
    //
    sm:   414px,
    sm-max: 767px,

    // Small tablet
    //
    md:   768px,
    md-max: 991px,

    // Large tablet / desktop
    //
    lg:   992px,
    lg-max: 1199px,

    // HD desktop
    //
    xl:  1200px,
    xl-max: 1599px,

    // Ultra HD desktop
    //
    xxl: 1600px,
    xxl-max: 20000px,
}


// Screen
// ======
//
// Functions to make writing media queries easy.
//
// Example
// -------
//
//     .foo {
//         color: blue;
//
//         // All screens from medium to extra large, inclusive ($screen.md, $screen.lg, $screen.xl)
//         +screen-in($screen.md, $screen.xl) {
//             color: red;
//         }
//
//         // Only small screens ($screen.sm)
//         +screen($screen.sm) {
//             color: purple;
//         }
//
//         // All screen sizes less than small (only $screen.xs in this case)
//         +screen-lt($screen.sm) {
//             color: white;
//         }
//     }

screen(size)
    if size == $screen.xxxs
        maxWidth = $screen.xxxs-max
    if size == $screen.xxs
        maxWidth = $screen.xxs-max
    if size == $screen.xs
        maxWidth = $screen.xs-max
    if size == $screen.sm
        maxWidth = $screen.sm-max
    if size == $screen.md
        maxWidth = $screen.md-max
    if size == $screen.lg
        maxWidth = $screen.lg-max
    if size == $screen.xl
        maxWidth = $screen.xl-max

    @media screen and (min-width: size) and (max-width: maxWidth)
        {block}

screen-lt(size)
    @media screen and (max-width: size)
        {block}

screen-lte(size)
    if size == $screen.xxxs
        width = $screen.xxxs-max
    if size == $screen.xxs
        width = $screen.xxs-max
    if size == $screen.xs
        width = $screen.xs-max
    if size == $screen.sm
        width = $screen.sm-max
    if size == $screen.md
        width = $screen.md-max
    if size == $screen.lg
        width = $screen.lg-max
    if size == $screen.xl
        width = $screen.xl-max

    @media screen and (max-width: width)
        {block}


screen-gt(size)
    if size == $screen.xxxs
        width = $screen.xxxs-max
    if size == $screen.xxs
        width = $screen.xxs-max
    if size == $screen.xs
        width = $screen.xs-max
    if size == $screen.sm
        width = $screen.sm-max
    if size == $screen.md
        width = $screen.md-max
    if size == $screen.lg
        width = $screen.lg-max
    if size == $screen.xl
        width = $screen.xl-max

    @media screen and (min-width: width + 1)
        {block}

screen-gte(size)
    @media screen and (min-width: size)
        {block}

screen-in(minSize maxSize)
    if maxSize == $screen.xxxs
        maxWidth = $screen.xxxs-max
    if maxSize == $screen.xxs
        maxWidth = $screen.xxs-max
    if maxSize == $screen.xs
        maxWidth = $screen.xs-max
    if maxSize == $screen.sm
        maxWidth = $screen.sm-max
    if maxSize == $screen.md
        maxWidth = $screen.md-max
    if maxSize == $screen.lg
        maxWidth = $screen.lg-max
    if maxSize == $screen.xl
        maxWidth = $screen.xl-max

    @media screen and (min-width: minSize) and (max-width: maxWidth)
        {block}