// Media query helpers. These make producing IE layouts
// super easy.

// The base css you write should be for mobile. You can
// then add desktop styles on top.
//
// Usage:
//
//   div.columns {
//     border: 1px solid;
//
//     @include media(desktop){
//       width: 30%;
//       float: left;
//     }
//     @include ie-lte(8) {
//       something to fix visual bugs in old IE
//     }
//     @include ie(6) {
//       padding: 0;
//     }
//   }


$is-ie: false !default;

@mixin media($size) {
  @if $is-ie {
    @if $ie-version > 6 {
      @content;
    }
  } @else {
    @if $size == desktop {
      @media (min-width: 768px){
        @content;
      }
    } @else if $size == tablet {
      @media (min-width: 640px){
        @content;
      }
    } @else {
      @media (min-width: $size){
        @content
      }
    }
  }
}

@mixin ie-lte($version) {
  @if $is-ie {
    @if $ie-version <= $version {
      @content;
    }
  }
}
@mixin ie($version) {
  @if $is-ie {
    @if $ie-version == $version {
      @content;
    }
  }
}
