////
/// Responsive
////

/// Used by mixins below

/// "root" is our keyword for the default scope, which has no query.
$adb-default-breakpoint: root;
// fallback for browsers that don't support media queries
$adb-desktop-breakpoint: large-desktop;
$adb-current-breakpoint: $adb-default-breakpoint;
$adb-placeholders: ();

/// show breakpoints visually by displaying a background-color on header
/// if $show-breakpoints in default theme is set to true
$show-breakpoints: false !default;

/// If using our breakpoint system, then use this to specify a `@media` block.
/// Thanks to Sass, this also works inside a rule block.
/// @alias _adb-breakpoint
/// @parameter {String} $breakpoint  a key inside $adb-breakpoints value
/// @see _adb-breakpoint
/// @example scss
///     @include adb-breakpoint(cellphone) {
///         .container {
///             width: 100px;
///         }
///     }
///     .foo {
///         color: blue;
///         @include adb-breakpoint(cellphone) {
///             color: red;
///         }
///     }

@mixin adb-breakpoint($breakpoint, $min:true, $max:true) {
    // Get the width from the keyword `$breakpoint`
    // Or `null` if the keyword doesn't exist in `$breakpoints` map
    $breakpoint-options: get-value($adb-breakpoints, $breakpoint);
    
    
    // If `$breakpoint` exists as a key in `$adb-breakpoints`
    @if $breakpoint-options != null {
        $active: get-value($breakpoint-options, active);
        $bg-color: get-value($breakpoint-options, bg-color);
        $class: get-value($breakpoint-options, class);
        
        @if $active == true {
            // Update `$current-breakpoint`
            $adb-current-breakpoint: $breakpoint;

            $min-width: get-value($breakpoint-options, min-width);
            $max-width: get-value($breakpoint-options, max-width);
            
            @if $max-width != null and $min-width != null and $max == true and $min == true {
                @media only screen and (min-width:$min-width) and (max-width:$max-width) {
                    @if ($class == false) {
                        @content;
                    }
                    @else {
                        // only show breakpoint on specific body or navigation class
                        body#{$class} &, * [class*=_nav]#{$class} & {
                            @content; 
                        }
                    }
                    
                    @if $show-breakpoints != false {
                        .#{$adb-prefix}primary_nav & {
                            background-color: $bg-color;
                        }
                    }
                }
            } @else if $min-width == null or $min == false {
                @media only screen and (max-width:$max-width) {
                    @if ($class == false) {
                        @content;
                    }
                    @else {
                        body#{$class} &, * [class*=_nav]#{$class} & {
                            @content; 
                        }
                    }
                    
                    @if $show-breakpoints != false {
                        .#{$adb-prefix}primary_nav & {
                            background-color: $bg-color;
                        }
                    }
                }
            } @else if $max-width == null or $max == false {
                @media only screen and (min-width:$min-width) {
                    @if ($class == false) {
                        @content;
                    }
                    @else {
                        body#{$class} &, * [class*=_nav]#{$class} & {
                            @content;
                        }
                    }
                    
                    @if $show-breakpoints != false {
                        .#{$adb-prefix}primary_nav & {
                            background-color: $bg-color;
                        }
                    }
                }
            }
            
            // Then reset `$current-breakpoint` to `$default-breakpoint` (root)
            $adb-current-breakpoint: $adb-default-breakpoint;
        }
    }

    // If `$breakpoint` doesn't exist in `$breakpoints`,
    // Warn the user and do nothing
    @else {
        @warn "Invalid breakpoint `#{$breakpoint}`.";
    }
}

/// You can choose to use this inside rule blocks.
/// @alias adb-breakpoint
/// @parameter {String} $breakpoint  a key inside $adb-breakpoints value
/// @see adb-breakpoint
/// @example scss
///     .foo {
///         color: blue;
///         @include _adb-breakpoint(cellphone) {
///             color: red;
///         }
///     }
@mixin _adb-breakpoint($breakpoint, $min:true, $max:true) {
    @include adb-breakpoint($breakpoint, $min, $max) {
        @content;
    }
}

/// Creates placeholder selectors for every breakpoint scope. Use this instead of @extend
/// if a selector needs to be used inside `@media` queries.
/// @parameter {String} $name  palceholder selector name
/// @example scss
///     @include adb-placeholder("tab") {
///         color: black;
///         background-color: white;
///     }
@mixin adb-placeholder($name) {
    // If placeholder doesn't exist yet in `$placeholders` list
    @if not index($adb-placeholders, $name) {
        // Store its name
        $adb-placeholders: append($adb-placeholders, $name);

        // Looping through `$breakpoints`
        @each $pair in $adb-breakpoints {
            $breakpoint: nth($pair, 1);

            // Opening a media query block
            @include adb-breakpoint($breakpoint) {
                // Generating a placeholder
                // Called $name-$breakpoint
                %#{$name}-#{$breakpoint} {
                    @content;
                }
            }
        }

        // And dumping a placeholder out of any media query as well
        // so basically at root level
        %#{$name}-#{$adb-default-breakpoint} {
            @content;
        }
    }

        // If placeholder already exists, just warn the user
    @else {
        @warn "Placeholder `#{$name}` already exists.";
    }
}

/// Extends a placeholder selector inside right media scope created by adb-placeholder().
/// @parameter {String} $placeholder-name  placeholder selector name
/// @example scss
///     @include adb-breakpoint(cellphone) {
///         .tab {
///             @include _adb-extend('tab');
///         }
///     }
@mixin _adb-extend($placeholder-name) {
    @extend %#{$placeholder-name}-#{$adb-current-breakpoint} !optional;
}



/// Retina media query
/// @parameter {Number} $ratio  Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
/// @example scss
///     @include _adb-retina {
///         background-size: 200px 50px;
///         background-image: image-url(image_file@2x.png);
///     }
@mixin _adb-retina($ratio:1.3) {
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min--moz-device-pixel-ratio: $ratio),
    only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
    only screen and (min-resolution: round($ratio * 96dpi)),
    only screen and (min-resolution: $ratio * 1dppx) {
        @content;
    }
}