@mixin media-query($breakpoint) {
  @if (map-get($breakpoints, $breakpoint)) == null {
    @content;
  } @else {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
}

// nest content inside breakpoint prefix classes
// in the apropriate media query block
@mixin add-breakpoint-prefixes {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    $breakpoint-prefix: "#{$breakpoint-name}-";

    @include media-query($breakpoint-name) {
      // Columns
      .#{$breakpoint-prefix} {
        @content;
      }
    }
  }
}


@function hex2rgb($hex){
  $rgb: unquote( 'rgb( #{ red($hex) }, #{ green($hex) }, #{ blue($hex) } )' );
  @return $rgb;
}


@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;
}

// URI encodes SVGs, for use in background-image. See icons.scss.
@function svg-url($svg){
  $encoded:'';
  $slice: 2000;
  $index: 0;
  $loops: ceil(str-length($svg)/$slice);
  @for $i from 1 through $loops {
    $chunk: str-slice($svg, $index, $index + $slice - 1);
    $chunk: str-replace($chunk,'"','\'');
    $chunk: str-replace($chunk,'<','%3C');
    $chunk: str-replace($chunk,'>','%3E');
    $chunk: str-replace($chunk,'&','%26');
    $chunk: str-replace($chunk,'#','%23');
    $encoded: #{$encoded}#{$chunk};
    $index: $index + $slice;
  }
  @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
}

// User select
// For selecting text on the page
@mixin user-select($select) {
  -webkit-user-select: $select;
    -khtml-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select; // IE10+
          user-select: $select;
}

// hide from humans not screen readers
@mixin screen-reader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@mixin theme-colors($vertical-colors) {
  @content;
}

@mixin hover-slide() {
  @content;
}

@mixin hover-border() {
  @content;
}

@mixin hover-box-shadow() {
  @content;
}

@mixin hover-underline() {
  @content;
}

@mixin hover-text-color() {
  @content;
}

@mixin hover-button-fill() {
  @content;
}

@mixin hover-scale-image() {
  @content;
}

@mixin hover-svg-fill() {
  @content;
}

@mixin outline() {
  outline: 2px solid Highlight !important;
}

@mixin outline-border() {
  border: 2px solid Highlight !important;
}