@import 'unit';
@import "color";
@import "value";
//@import 'breakpoint';
@mixin clearfix {
    &::before,
    &::after {
        content: ' ';
        display: table;
        flex-basis: 0;
        //order: 1;
    }

    &::after {
        clear: both;
    }
}

/// Vertically centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/// Horizontally centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin horizontal-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/// Absolutely centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
@mixin element-invisible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/// Reverses the CSS output created by the `element-invisible()` mixin.
@mixin element-invisible-off {
    position: static !important;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
}

/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
/// @type List
$breakpoint-classes: (small medium large) !default;

/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
///
/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
@function breakpoint($val: small) {
    // Size or keyword
    $bp: nth($val, 1);
    // Value for max-width media queries
    $bp-max: 0;
    // Direction of media query (up, down, or only)
    $dir: if(length($val) > 1, nth($val, 2), up);
    // Eventual output
    $str: '';
    // Is it a named media query?
    $named: false;

    // Orientation media queries have a unique syntax
    @if $bp == 'landscape' or $bp == 'portrait' {
        @return '(orientation: #{$bp})';
    }
    @else if $bp == 'retina' {
        @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
    }

    // Try to pull a named breakpoint out of the $breakpoints map
    @if type-of($bp) == 'string' {
        @if map-has-key($breakpoints, $bp) {
            @if $dir == 'only' or $dir == 'down' {
                $bp-max: -zf-map-next($breakpoints, $bp);
            }

            $bp: map-get($breakpoints, $bp);
            $named: true;
        }
        @else {
            $bp: 0;
        }
    }

    // Convert any pixel, rem, or unitless value to em
    $bp: -zf-bp-to-em($bp);
    @if $bp-max {
        $bp-max: -zf-bp-to-em($bp-max) - (1/16);
    }

    // Conditions to skip media query creation
    // - It's a named breakpoint that resolved to "0 down" or "0 up"
    // - It's a numeric breakpoint that resolved to "0 " + anything
    @if $bp > 0em or $dir == 'only' or $dir == 'down' {
        // `only` ranges use the format `(min-width: n) and (max-width: n)`
        @if $dir == 'only' {
            // Only named media queries can have an "only" range
            @if $named == true {
                // Only use "min-width" if the floor is greater than 0
                @if $bp > 0em {
                    $str: $str + '(min-width: #{$bp})';

                    // Only add "and" to the media query if there's a ceiling
                    @if $bp-max != null {
                        $str: $str + ' and ';
                    }
                }

                // Only use "max-width" if there's a ceiling
                @if $bp-max != null {
                    $str: $str + '(max-width: #{$bp-max})';
                }
            }
            @else {
                @warn 'breakpoint(): Only named media queries can have an `only` range.';
            }
        }

            // `down` ranges use the format `(max-width: n)`
        @else if $dir == 'down' {
            $max: if($named, $bp-max, $bp);

            // Skip media query creation if input value is exactly "0 down",
            // unless the function was called as "small down", in which case it's just "small only"
            @if $named or $bp > 0em {
                @if $max != null {
                    $str: $str + '(max-width: #{$max})';
                }
            }
        }

            // `up` ranges use the format `(min-width: n)`
        @else if $bp > 0em {
            $str: $str + '(min-width: #{$bp})';
        }
    }

    @return $str;
}

/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
///  - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
///  - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
///  - If a rem value is passed, the unit will be changed to em.
///  - If an em value is passed, the value will be used as-is.
///
/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
///
/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
@mixin breakpoint($value) {
    $str: breakpoint($value);

    // If $str is still an empty string, no media query is needed
    @if $str == '' {
        @content;
    }

        // Otherwise, wrap the content in a media query
    @else {
        @media screen and #{$str} {
            @content;
        }
    }
}