//
//  Utilities
//

// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
// @param {Number} $num - Number to strip unit from.
// @returns {Number} The same number, sans unit.
@use "sass:math";

@function strip-unit($num) {
  @return math.div($num, $num * 0 + 1);
}

// Converts pixels to rem
// @param {String} $pixels
// @returns {String} returns the unit in rem's
@function rem($pixels) {
  @return #{math.div($pixels, $font-size-root)}rem;
}

// Clearfix
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@function capitalize($string) {
  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}

//  Function to replace characters in a string
@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;
}

//  Function to create an optimized svg url
@function svg-url($svg){
  // Chunk up string in order to avoid "SystemStackError: stack level too deep"
  $encoded:'';
  $slice: 1500;
  $index: 0;
  $loops: ceil(calc(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}");
}

//
//  Color contrast using YIQ colorspace
//  https://en.wikipedia.org/wiki/YIQ
//
@mixin color-contrast($background) {
  $r: red($background);
  $g: green($background);
  $b: blue($background);
  $black: rgba(0,0,0,0.7) !default;
  $white: #ffffff !default;

  $yiq: (($r*299)+($g*587)+($b*114))*0.001;

  @if ($yiq >= 148) {
    color: $black;
  }
  @else {
    color: $white;
  }
}

//
//  Remove default list style
//
@mixin unstyled-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

//
//  Place an object in the absolute center of a wrapper
//
@mixin absolute-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}