// @viewport--x($reversed)

// viewport s
@mixin viewport--s($type: null) {
  // inversed
  @if ($type == 'inversed') {
    @media (max-width: #{($breakpoint-viewport--s - 1)}) {
      @content;
    }
  }
  // range
  @else if ($type== 'range') {
    @media (min-width:0) and (max-width: #{($breakpoint-viewport--s - 1)}) {
      @content;
    }
  }
  // default
  @else {
    @media (min-width: #{$breakpoint-viewport--s}) {
      @content;
    }
  }
}

// viewport m
@mixin viewport--m($type: null) {
  // inversed
  @if ($type == 'inversed') {
    @media (max-width: #{($breakpoint-viewport--m - 1)}) {
      @content;
    }
  }
  // range
  @else if ($type== 'range') {
    @media (min-width: $breakpoint-viewport--m) and (max-width: #{($breakpoint-viewport--l - 1)}) {
      @content;
    }
  }
  // default
  @else {
    @media (min-width: #{$breakpoint-viewport--m}) {
      @content;
    }
  }
}

// viewport l
@mixin viewport--l($type: null) {
  // inversed
  @if ($type == 'inversed') {
    @media (max-width: #{($breakpoint-viewport--l - 1)}) {
      @content;
    }
  }
  // range
  @else if ($type== 'range') {
    @media (min-width: $breakpoint-viewport--l) and (max-width: #{($breakpoint-viewport--xl - 1)}) {
      @content;
    }
  }
  // default
  @else {
    @media (min-width: #{$breakpoint-viewport--l}) {
      @content;
    }
  }
}

// viewport xl
@mixin viewport--xl($type: null) {
  @if ($type == 'inversed') {
    @media (max-width: #{($breakpoint-viewport--xl - 1)}) {
      @content;
    }
  }
  // range
  @else if ($type== 'range') {
    @media (min-width: $breakpoint-viewport--xl) and (max-width: #{($breakpoint-viewport--xxl - 1)}) {
      @content;
    }
  }
  // default
  @else {
    @media (min-width: #{$breakpoint-viewport--xl}) {
      @content;
    }
  }
}

// viewport xxl
@mixin viewport--xxl($type: null) {
  // inversed
  @if ($type == 'inversed') {
    @media (max-width: #{($breakpoint-viewport--xxl - 1)}) {
      @content;
    }
  }
  // default
  @else {
    @media (min-width: #{$breakpoint-viewport--xxl}) {
      @content;
    }
  }
}

// viewport range
@mixin viewport--range($viewport1, $viewport2) {
  @media (min-width: #{($viewport1)}) and (max-width: #{($viewport2 - 1)}) {
    @content;
  }
}

// Internet Explorer 10 + 11
@mixin internet-explorer-10-11 {
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    @content;
  }
}