/* ============================================================================
   @CORE -> MIXINS -> TARGET BROWSERS
   ========================================================================= */


/**
 * Target specific browsers.
 *
 * N.B. these mixins should be avoided as it's not good to target styles for
 * different browsers. And the Mozilla mixin cannot be nested in a style
 * declaration like the others, it has to exist by itself.
 *
 * @example
   @include target-webkit {
     .foo {background: blue;}
   }

   @include target-mozilla {
     .foo {background: red;}
   }

   @include target-IE10-and-up {
     .foo {background: orange;}
   }
 */


/**
 * Webkit.
 */

@mixin target-webkit {
  @media all and (-webkit-min-device-pixel-ratio: 0) {
    @content;
  }
}


/**
 * Mozilla.
 */

@mixin target-mozilla {
  @-moz-document url-prefix() {
    @content;
  }
}


/**
 * IE 10 and up.
 */

@mixin target-IE10-and-up {
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @content;
  }
}