@mixin image-2x($image, $width: 100%, $height: 100%) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

@mixin default-text-input-styles() {
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid $base-border-color;
  box-sizing: border-box;
  color: #333;
  font-size: 16px;
  height: 38px;
  outline: none;
  padding: 0 15px;
  transition: 0.15s border-color;
  &:hover {
    border-color: #8e959d;
    color: $input-color;
  }
  &:focus {
    border-color: $poa-purple;
    color: $input-color;
  }
}

@mixin placeholder-full($color: #fff, $font-size: 14px) {
  &::-webkit-input-placeholder {
      /* WebKit browsers */
      color: $color!important;
      font-size: $font-size!important;
  }
  &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: $color!important;
      font-size: $font-size!important;
      opacity: 1;
  }
  &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: $color!important;
      font-size: $font-size!important;
      opacity: 1;
  }
  &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: $color!important;
      font-size: $font-size!important;
  }
}

// #avoid text selection
@mixin not-selectable-text() {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

// use for retina background images @1x / @2x / @3x
@mixin image-retina($filename, $extension) {

  background-image: url($filename + '.' + $extension);

  @media  (-webkit-min-device-pixel-ratio: 2),
          (-moz-min-device-pixel-ratio: 2),
          (min-resolution: 192dpi),
          (min-resolution: 2dppx) {
      & {
          background-image: url($filename + '@2x.' + $extension);
      }
  }

  @media  (-webkit-min-device-pixel-ratio: 3),
          (-moz-min-device-pixel-ratio: 3),
          (min-resolution: 288dpi),
          (min-resolution: 3dppx) {
      & {
          background-image: url($filename + '@3x.' + $extension);
      }
  }

}

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
      content: "";
      display: block;
      padding-top: ($height / $width) * 100%;
      width: 100%;
  }
  > .content-ratio {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }
}
