// Util Mixins/Functions

// Appearance (not a CSS standard, does not autoprefix)
// --------------------------------------------------

@mixin appearance($val) {
  -webkit-appearance: $val;
  -moz-appearance: $val;
}


// String Replace Function
// --------------------------------------------------

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}


// URL Encode Function
// --------------------------------------------------

@function url-encode($val) {
  $val: str-replace($val, ' ', '%20');
  @return $val;
}


// SVG Background Image Mixin
// --------------------------------------------------

@mixin svg-background-image($svg) {
  $url: url-encode($svg);
  background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
}


// Hairline
// --------------------------------------------------

@mixin hairline($placement, $line-color, $z-index: 999) {
  // border-width: 1px will actually create 2 device pixels on retina
  // this nifty trick sets an actual 1px border on hi-res displays

  position: relative;

  @if $placement == top {
    &:before {
      @if $line-color == none {
        border-top: none;

      } @else {
        position: absolute;
        top: 0;
        bottom: auto;
        left: 0;
        z-index: $z-index;
        display: block;
        width: 100%;
        height: 1px;
        content: '';

        border-top: 1px solid $line-color;

        @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
          border: none;
          background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
          background-position: bottom;
          background-size: 100% 1px;
          background-repeat: no-repeat;
        }
      }
    }

  } @else if $placement == bottom {
    &:after {
      @if $line-color == none {
        border-bottom: none;

      } @else {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: $z-index;
        display: block;
        width: 100%;
        height: 1px;
        content: '';

        border-bottom: 1px solid $line-color;

        @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
          border: none;
          background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
          background-position: bottom;
          background-size: 100% 1px;
          background-repeat: no-repeat;
        }
      }
    }

  }

}