// ============================================================
//          Breakpoints                                  
// ------------------------------------------------------------

//**
// Mixin: break-device 
// Insert a predefined Media Querie
// 'Mixin with Content Insert'
//
// @mixin     break-device
// @param     $device {string} Options: mobile-only, small-tablet-only, small-tablet-and-up, small-tablet-and-under, tablet-only, tablet-and-up, tablet-and-under, desktop-and-under, desktop-only, desktop-and-up 
// @usage:     +break-device($device)
//              your Declarations
//**
@mixin break-device($device)
  @if $device == mobile-only 
    @media (max-width: $bp-mobile + 0px) 
      @content

  @if $device == small-tablet-only 
    @media (min-width: $bp-mobile + 1px) and (max-width: $bp-small-tablet - 1px) 
      @content
      
  @if $device == small-tablet-and-up 
    @media (min-width: $bp-mobile + 1px) 
      @content
    
  @if $device == small-tablet-and-under 
    @media (max-width: $bp-small-tablet - 1px) 
      @content

  @if $device == tablet-only 
    @media (min-width: $bp-small-tablet + 1px) and (max-width: $bp-tablet + 0px) 
      @content
      
  @if $device == tablet-and-up 
    @media (min-width: $bp-small-tablet + 1px) 
      @content
      
  @if $device == tablet-and-under 
    @media (max-width: $bp-tablet + 0px) 
      @content
      
  @if $device == desktop-and-under 
    @media (max-width: $bp-desktop + 0px) 
      @content
      
  @if $device == desktop-only 
    @media (min-width: $bp-tablet + 1px) and (max-width: $bp-desktop + 0px) 
      @content
      
  @if $device == desktop-and-up 
    @media (min-width: $bp-tablet + 1px) 
      @content

//**
// Mixin: flex-breakpoint 
// Flexible Breakpoint Mixin
// 'Mixin with Content Insert'
//
// @mixin     flex-breakpoint
// @param     $value {list} Value Min and Max or only Min/Max Width
// @param     $dir {value} max, min
// @usage:    +flex-breakpoint($value,$dir)
//              your Declarations
//**
@mixin flex-breakpoint($value: 768, $dir: max)
  // with two values media queries with min and max
  @if length($value) == 2
    $max: nth($value,2) + 0px
    $min: nth($value,1) + 0px
    @media only screen and (min-width: $min) and (max-width: $max)
      @content   

  // with one value media querie only min or max
  @if length($value) == 1
    $size: $value + 0px
    @if $dir == max
      @media only screen and (max-width: $size)
        @content

    @if $dir == min
      @media only screen and (min-width: $size)
        @content

//**
// Mixin: break 
// Flexible Breakpoint Mixin Short Version that connected with the Breakpoint list
// 'Mixin with Content Insert'
//
// @mixin     break
// @param     $value {list} Value Min and Max or only Min/Max Width
// @param     $dir {value} max, min
// @usage:    +break($value,$dir)
//              your Declarations
//**
@mixin break($value: 3, $dir: max)
  // with two values media queries with min and max
  @if length($value) == 2
    $max: break(nth($value,2)) - 1px
    $min: break(nth($value,1)) + 0px
    @media only screen and (min-width: $min) and (max-width: $max)
      @content   

  // with one value media querie only min or max
  @if length($value) == 1
    $size: break($value) + 0px
    @if $dir == max
      @media only screen and (max-width: $size - 1)
        @content

    @if $dir == min
      @media only screen and (min-width: $size)
        @content

//**
// Mixin: hidpi-breakpoint 
// Description of your Mixin
//
// @mixin     hidpi-breakpoint
// @param     $ratio {value} The targeted Pixel Ratio - Default : 1.3
// @usage:     +hdpi-breakpoint($ratio)
//              your Declarations
//**

@mixin hdpi-breakpoint($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*96)}dpi), only screen and (min-resolution: #{$ratio}dppx) 
    @content

//**
// Mixin: eq 
// Mixin for elementQuerys Short Form
// 'Mixin with Content Insert'
//
// @mixin     eq
// @param     $value {list} Breakpoints from the List
// @param     $sel {string} Name of the Selector (when false use mixin inner)
// @param     $ref {string} The Reference Point [:default = false]
// @param     $dir {string} Direction min/max [:default = 'max']
// @param     $dim {string} Dimension [:default = 'width']
// @usage:    +eq($value, $sel, $ref, $dir, $dim)
//              your Declarations
//**
@mixin eq($value: 3, $sel: false, $ref: false, $dir: max, $dim: width)
  @if $sel != false
    @if $ref == false
      @if length($value) == 2
        $max: nth($value,2) + 0px
        $min: nth($value,1) + 0px
        #{$sel}[min-#{$dim}~="#{$min}"][max-#{$dim}~="#{$max}"]
          @content
      @if length($value) == 1
        $size: $value + 0px
        @if $dir == max
          #{$sel}[max-#{$dim}~="#{$size}"]
            @content

        @if $dir == min
          #{$sel}[min-#{$dim}~="#{$size}"]
            @content
    @else
      @if length($value) == 2
        $max: nth($value,2) + 0px
        $min: nth($value,1) + 0px
        #{$ref}[min-#{$dim}~="#{$min}"][max-#{$dim}~="#{$max}"] #{$sel}
          @content
      @if length($value) == 1
        $size: $value + 0px
        @if $dir == max
          #{$ref}[max-#{$dim}~="#{$size}"] #{$sel}
            @content

        @if $dir == min
          #{$ref}[min-#{$dim}~="#{$size}"] #{$sel}
            @content
  @else
    @if $ref == false
      @if length($value) == 2
        $max: nth($value,2) + 0px
        $min: nth($value,1) + 0px
        &[min-#{$dim}~="#{$min}"][max-#{$dim}~="#{$max}"]
          @content
      @if length($value) == 1
        $size: $value + 0px
        @if $dir == max
          &[max-#{$dim}~="#{$size}"]
            @content

        @if $dir == min
          &[min-#{$dim}~="#{$size}"]
            @content
    @else
      @if length($value) == 2
        $max: nth($value,2) + 0px
        $min: nth($value,1) + 0px
        #{$ref}[min-#{$dim}~="#{$min}"][max-#{$dim}~="#{$max}"] &
          @content
      @if length($value) == 1
        $size: $value + 0px
        @if $dir == max
          #{$ref}[max-#{$dim}~="#{$size}"] &
            @content

        @if $dir == min
          #{$ref}[min-#{$dim}~="#{$size}"] &
            @content 

//**
// Mixin: eq-between
// Mixin for Element Query - use Breakpoint Slice
// 'Mixin with Content Insert'
//
// @mixin     eq-between
// @param     $slice-left {value} Left Slice Breakpoint
// @param     $slice-right {value} Right Slice Breakpoint
// @param     $sel {string} Name of the Selector (when false use mixin inner)
// @usage:    +eq-between($slice-left, $slice-right, $sel)
//              your Declarations
//**
@mixin eq-between($slice-left, $slice-right, $sel: false)
  $right: null
  $ref: 'html'
  @if $sel != false
    $context:   left-bp-of-slice($slice-left)
    @if $context == 'max-width'
      $context: 0
    @if $slice-right < total-slices()
      $right:   right-bp-of-slice($slice-right)

    @if $context != 0
      
      @if $right == null
        #{$ref}[min-width~="#{$context}"] #{$sel}
          @content
      @else
        #{$ref}[min-width~="#{$context}"][max-width~="#{$right}"] #{$sel}
          @content
    @else
      #{$ref}[max-width~="#{$right}"] #{$sel}
        @content

  @else
    $context:   left-bp-of-slice($slice-left)
    @if $context == 'max-width'
      $context: 0
    @if $slice-right < total-slices()
      $right:   right-bp-of-slice($slice-right)

    @if $context != 0
      @if $right == null
        #{$ref}[min-width~="#{$context}"] &
          @content
      @else
        #{$ref}[min-width~="#{$context}"][max-width~="#{$right}"] &
          @content
    @else
      #{$ref}[max-width~="#{$right}"] &
        @content

//**
// Mixin: eq-at
// Mixin for Element Query - use Breakpoint Slice
// 'Mixin with Content Insert'
//
// @mixin     eq-at
// @param     $slice {value} Break at
// @param     $sel {string} Name of the Selector (when false use mixin inner)
// @usage:    +eq-at($slice, $sel)
//              your Declarations
//**
@mixin eq-at($slice,$sel: false)
  +eq-between($slice, $slice,$sel, $sibl)
    @content

//**
// Mixin: eq-from
// Mixin for Element Query - use Breakpoint Slice
// 'Mixin with Content Insert'
//
// @mixin     eq-from
// @param     $slice {value} Break from
// @param     $sel {string} Name of the Selector (when false use mixin inner)
// @usage:    +eq-from($slice, $sel)
//              your Declarations
//**
@mixin eq-from($slice,$sel: false)
  +eq-between($slice, total-slices(), $sel, $sibl)
    @content

//**
// Mixin: eq-to
// Mixin for Element Query - use Breakpoint Slice
// 'Mixin with Content Insert'
//
// @mixin     eq-to
// @param     $slice {value} Break to
// @param     $sel {string} Name of the Selector (when false use mixin inner)
// @usage:    +eq-to($slice, $sel)
//              your Declarations
//**
@mixin eq-to($slice,$sel: false)
  +eq-between(1, $slice, $sel, $sibl)
    @content