// Util Mixins/Functions



// Appearance Mixin
// --------------------------------------------------

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


// User Select Mixin
// --------------------------------------------------

@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select;
  user-select: $select;
}


// Background Sizing Mixin
// --------------------------------------------------

@mixin background-size($size) {
  -webkit-background-size: $size;
  background-size: $size;
}


// 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) {
  // use $line-color: none to override existing hairline settings

  @if $placement == top {

    &:before {
      @if $line-color == none {
        background-color: inherit;

      } @else {
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        z-index: $z-index;
        display: block;
        width: 100%;
        height: 1px;
        @include transform-origin(50%, 0%);
        background-color: $line-color;
        content: '';
      }
    }

  } @else if $placement == bottom {

    &:after {
      @if $line-color == none {
        background-color: inherit;

      } @else {
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        z-index: $z-index;
        display: block;
        width: 100%;
        height: 1px;
        @include transform-origin(50%, 0%);
        background-color: $line-color;
        content: '';
      }
    }

  }


}