$width-small:  400px;
$width-medium: 760px;
$width-large:  1200px;

@mixin custom-responsive($width) {
  @if $width == wide-screens {
    @media only screen and (max-width: $width-large) { @content; }
  }
  @else if $width == medium-screens {
    @media only screen and (max-width: $width-medium) { @content; }
  }
  @else if $width == small-screens {
    @media only screen and (max-width: $width-small) { @content; }
  }
}

// @include responsive(wide-screens) { width: 80%; }

@mixin custom-retinize($file, $type, $width, $height) {
  background-image: url('../images/' + $file + '.' + $type);

  @media (-webkit-min-device-pixel-ratio: 1.5),
         (min--moz-device-pixel-ratio: 1.5),
         (-o-min-device-pixel-ratio: 3/2),
         (min-device-pixel-ratio: 1.5),
         (min-resolution: 1.5dppx) {
    & {
      background-image: url('../images/' + $file + '.' + $type);
      -webkit-background-size: $width $height;
         -moz-background-size: $width $height;
              background-size: $width $height;
    }
  }
}

// how to use @include retinize('icon-dribbble', 'png', 24px, 24px);

@mixin custom-background-body($file, $type) {
    background: url('../images/' + $file + '.' + $type) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

// how to use @include retinize('icon-dribbble', 'png', 24px, 24px);
@mixin custom-rounded($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}
@mixin custom-shadow($x, $y, $z, $blur, $color) {
  -webkit-box-shadow: $x $y $z $blur $color;
     -moz-box-shadow: $x $y $z $blur $color;
          box-shadow: $x $y $z $blur $color;
}
@mixin custom-shadow-inset($x, $y, $z, $blur, $color) {
  -webkit-box-shadow: inset $x $y $z $blur $color;
     -moz-box-shadow: inset $x $y $z $blur $color;
          box-shadow: inset $x $y $z $blur $color;
}
@mixin custom-transition($property) {
  -webkit-transition: $property .2s ease;
     -moz-transition: $property .2s ease;
       -o-transition: $property .2s ease;
          transition: $property .2s ease;
}
@mixin custom-box-sizing {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
@mixin custom-linear-gradient($from, $to) {
  /* Fallback for sad browsers */
  background-color: $to;
  /* Mozilla Firefox */
  background-image:-moz-linear-gradient($from, $to);
  /* Opera */
  background-image:-o-linear-gradient($from, $to);
  /* WebKit (Chrome 11+) */
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
  /* WebKit (Safari 5.1+, Chrome 10+) */
  background-image: -webkit-linear-gradient($from, $to);
  /* IE10 */
  background-image: -ms-linear-gradient($from, $to);
  /* W3C */
  background-image: linear-gradient($from, $to);
}
@mixin text-highlight-selection($background, $color) {
    ::selection { background: $background; color: $color; text-shadow: none; }
    ::-webkit-selection{ background: $background; color: $color; text-shadow: none; }
    ::-moz-selection{ background: $background; color: $color; text-shadow: none; }
}