// Copyright 2018-Present Okta, Inc.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at

// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * Rem-based modular scale for type
 */

@function ms($step) {
  $value: 1rem;

  @if $step > 0 {
    @for $i from 1 through $step {
      $value: ($value * $scale-ratio);
    }
  }

  @if $step < 0 {
    @for $i from $step through -1 {
      $value: ($value / $scale-ratio);
    }
  }

  @return $value;
}

/**
 * Simple string replacement
 */

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

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

/**
 * Retrieves map keys from nested maps.
 */

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

@function fauxpacity($color) {
  $value: mix($color, $white, 40%);

  @return $value;
}

/**
 * Retrieves and encodes icons for use in CSS
 * Works down to IE9
 *
 * Refs:
 * https://css-tricks.com/creating-a-maintainable-icon-system-with-sass/
 * https://codepen.io/chriscoyier/pen/ZQgvyG/
 * https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
 * https://codepen.io/jakob-e/pen/doMoML
 */

$icons: (
  'alert': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 15"><path fill="%%COLOR%%" fill-rule="evenodd" d="M12.252 13c.622 0 1.182-.32 1.498-.856a1.74 1.74 0 0 0 .016-1.758L9.515 2.884A1.722 1.722 0 0 0 8 2c-.636 0-1.2.33-1.515.884l-4.251 7.502a1.737 1.737 0 0 0 .017 1.758c.315.536.876.856 1.496.856h8.505zm-.998-11.103l4.252 7.502a3.715 3.715 0 0 1-.034 3.762A3.707 3.707 0 0 1 12.252 15H3.747a3.708 3.708 0 0 1-3.219-1.839 3.718 3.718 0 0 1-.034-3.762l4.251-7.502A3.703 3.703 0 0 1 8 0a3.7 3.7 0 0 1 3.254 1.897zM7.29 10.285c.37-.375 1.05-.375 1.42 0 .09.09.16.202.21.323.05.121.08.253.08.384a.98.98 0 0 1-.08.384c-.05.132-.12.233-.21.334a.984.984 0 0 1-.71.293.96.96 0 0 1-.38-.072 1.172 1.172 0 0 1-.33-.22 1.028 1.028 0 0 1-.21-.335.963.963 0 0 1-.08-.384c0-.263.11-.525.29-.707zM7.998 4a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>',
  'check':'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="%%COLOR%%" d="M0 5.6L1.6 4l3.2 3.3 5.6-5.7L12 3.1l-7.2 7.4L0 5.6z"/></svg>',
  'close':'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%%COLOR%%" fill-rule="evenodd" d="M13.704 2.295a1.008 1.008 0 0 0-1.426 0L8 6.574 3.722 2.295a1.008 1.008 0 1 0-1.426 1.427L6.574 8l-4.279 4.278a1.008 1.008 0 1 0 1.426 1.426L8 9.427l4.278 4.279a1.008 1.008 0 1 0 1.427-1.427L9.426 8l4.278-4.278a1.008 1.008 0 0 0 0-1.427z" clip-rule="evenodd"/></svg>',
  'external':'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12"><path fill="%%COLOR%%" fill-rule="evenodd" d="M10.462 1.809A.499.499 0 0010 1.5H6.5a.5.5 0 000 1h2.293L4.646 6.646a.5.5 0 10.708.708L9.5 3.207V5.5a.5.5 0 001 0V2v-.003a.5.5 0 00-.038-.188zM3.067 2.5a.567.567 0 00-.567.567v5.866a.567.567 0 00.567.567h5.866a.567.567 0 00.567-.567V8a.5.5 0 011 0v.933A1.567 1.567 0 018.933 10.5H3.067A1.567 1.567 0 011.5 8.933V3.067A1.567 1.567 0 013.067 1.5H4a.5.5 0 010 1h-.933z" clip-rule="evenodd"/></svg>',
);

@function get-icon($icon, $color) {
  // Check for valid color
  @if 'color' != type-of( $color ) {
    @warn 'The requested color - "' + $color + '" - was not recognized as a Sass color value.';

    @return null;
  }

  @if map-has-key( $icons, $icon ) {
    $icon: map-get($icons, $icon);
    $color-placeholder: '%%COLOR%%';
    $icon: str-replace($icon, $color-placeholder, $color);
  } @else {
    @warn 'The requested icon - "' + $icon + '" - is not defined in the $icons map.';

    @return null;
  }

  // Add missing namespace
  @if not str-index($icon,xmlns) {
    $icon: str-replace($icon, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
  }

  // Chunk up string in order to avoid "stack level too deep" error

  $encoded: '';
  $slice: 2000;
  $index: 0;
  $loops: ceil(str-length($icon)/$slice);

  @for $i from 1 through $loops {
    $chunk: str-slice($icon, $index, $index + $slice - 1);

    // Encode
    $chunk: str-replace($chunk, '"', '\'');
    $chunk: str-replace($chunk, '%', '%25');
    $chunk: str-replace($chunk, '#', '%23');
    $chunk: str-replace($chunk, '{', '%7B');
    $chunk: str-replace($chunk, '}', '%7D');
    $chunk: str-replace($chunk, '<', '%3C');
    $chunk: str-replace($chunk, '>', '%3E');

    $encoded: #{$encoded}#{$chunk};
    $index: $index + $slice;
  }

  @return url('data:image/svg+xml,#{$encoded}');
}
