$font-head: 'Segoe UI', 'Ubuntu', sans-serif;;
$font-body: 'Segoe UI', 'Ubuntu', sans-serif;

$primary: rgb(19, 94, 150);
$primary-shade: rgb(10, 75, 120);
$primary-tint: rgb(34, 113, 177);
$primary-contrast: rgb(255, 255, 255);

$secondary: rgb(114, 174, 230);
$secondary-shade: rgb(60, 119, 175);
$secondary-tint: rgb(142, 199, 252);
$secondary-contrast: rgb(29, 35, 39);

$success: rgb(0, 163, 42);
$success-shade: rgb(1, 124, 32);
$success-tint: rgb(11, 207, 60);
$success-contrast: rgb(255, 255, 255);

$danger: rgb(214, 54, 56);
$danger-shade: rgb(177, 34, 37);
$danger-tint: rgb(248, 64, 67);
$danger-contrast: rgb(255, 255, 255);

$medium: rgb(140, 143, 148);
$medium-shade: rgb(100, 105, 112);
$medium-tint: rgb(167, 170, 173);
$medium-contrast: rgb(29, 35, 39);

$light: rgb(255, 255, 255);
$light-shade: rgb(240, 240, 241);
$light-tint: rgb(255, 255, 255);
$light-contrast: rgb(29, 35, 39);

$dark: rgb(29, 35, 39);
$dark-shade: rgb(28, 34, 37);
$dark-tint: rgb(44, 51, 56);
$dark-contrast: rgb(255, 255, 255);

$recolors: (
  // primary
  primary: invert(15%) sepia(98%) saturate(3540%) hue-rotate(194deg) brightness(86%) contrast(85%),
  // secondary
  secondary: invert(62%) sepia(72%) saturate(433%) hue-rotate(181deg) brightness(95%) contrast(90%),
  // medium
  medium: invert(62%) sepia(6%) saturate(256%) hue-rotate(179deg) brightness(90%) contrast(84%),
  medium-tint: invert(76%) sepia(7%) saturate(136%) hue-rotate(169deg) brightness(91%) contrast(85%),
  // dark
  dark: invert(11%) sepia(6%) saturate(1549%) hue-rotate(161deg) brightness(98%) contrast(93%),
  dark-tint: invert(15%) sepia(18%) saturate(490%) hue-rotate(162deg) brightness(92%) contrast(86%),
  dark-contrast: invert(100%) sepia(0%) saturate(7500%) hue-rotate(22deg) brightness(103%) contrast(103%),
);

@mixin register_icons($collection) {
  @each $name, $config in $collection {
    $pack: nth($config, 1);
    $srcOrName: nth($config, 2);
    .icon-#{$name} {
      @if $pack == 'direct' {
        background-image: url('#{$srcOrName}');
      } @else {
        @if $srcOrName != null {
          background-image: url('https://unpkg.com/@unistylus/#{$pack}-icons@latest/#{$srcOrName}.svg');
        } @else {
          background-image: url('https://unpkg.com/@unistylus/#{$pack}-icons@latest/#{$name}.svg');
        }
      }
    }
  }
}

@mixin icon_recolor($name) {
  filter: brightness(0) saturate(100%) #{map-get($recolors, $name)} !important;
}

@mixin icon_variant($path) {
  background-image: url('#{$path}');
}