@use "sass:math";
@use "sass:map";
@use "sass:string";
@use "sass:color";
@use "colorRamp" as *;
@use "metrics" as metric;

//
// ____ ____ _    ____ ____ ____
// |    |  | |    |  | |__/ [__
// |___ |__| |___ |__| |  \ ___]
//
//

// example: colors(orange, 400);
@function colors($color, $idx) {
  $temp: map.get($sstColors, $color);
  @return map.get($temp, $idx);
  // @return string.unquote(map.get($temp, $idx));
}


@function toRGB($c) {
  @return color.channel($c, "red") + ", " + color.channel($c, "green") + ", " + color.channel($c, "blue");
}


// this probably doesn't work with the new colors module in sass
@mixin toHSL($color) {
   --h: #{color.hue($color)};
   --s: #{color.saturation($color)};
   --l: #{color.lightness($color)};
}


//
// ___  _ ____ ___  _    ____ _   _
// |  \ | [__  |__] |    |__|  \_/
// |__/ | ___] |    |___ |  |   |
//


//   vals: color, xy, blur, offset
//   xy is the number of pixels on x and y axis
//   offset is used to stagger the effect.
//
//   only the color is required.

@mixin outlined($color, $xy : 1, $blur : 0, $offset: $xy) {
  text-shadow: #{$xy * -1}px  #{$xy * -1}px     #{$blur}px $color,
               #{$xy * -1}px  #{$offset}px      #{$blur}px $color,
               #{$xy}px       #{$offset * -1}px #{$blur}px $color,
               #{$xy}px       #{$xy}px          #{$blur}px $color;
}


@mixin gradientText($gradient, $stroke: 0, $strokeColor: transparent) {
  background: $gradient;
  background-size: 100%;
  -webkit-text-stroke-width: #{$stroke}px;
  -webkit-text-stroke-color: $strokeColor;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  -webkit-font-smoothing: antialiased;
  box-decoration-break: clone;
}
// ^ can also just do "color: transparent " to avoid the -webkit-prefixes stuff

// scrollbars
// vars: thumb color, gutter color, width
@mixin scrolls($thumb, $gutter, $width: 10) {
  &::-webkit-scrollbar {
    width: #{$width}px;
  }
  &::-webkit-scrollbar-track {
    background: $gutter;
    // border-radius: #{$width/2}px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $thumb ;
    border-radius: #{math.div($width, 2)}px;
    border: 0 solid $thumb;
  }

  scrollbar-width: thin;
  scrollbar-color: $thumb $gutter;
}

@mixin icon-mask($image, $color, $position: left top, $size: contain) {
  mask-image: $image;
  mask-type: luminance;
  mask-repeat: no-repeat;
  mask-position: $position;
  mask-size: $size;
  background-color: $color;
}


@mixin gridSpans($className, $num) {
  @for $i from 1 through $num {
    #{"." + $className + "-" + $i} {
      grid-column: span $i;
    }
  }
}

 // _______  _____  __   _ _______
 // |______ |     | | \  |    |
 // |       |_____| |  \_|    |
 //

// set the optical size on the variable font.
// accepts "display", "text", "micro", or a number

@mixin fontType($type) {
  @if $type == display {
    font-variation-settings: 'opsz' 30;
  } @else if $type == text {
    font-variation-settings: 'opsz' 12;
  } @else if $type == micro {
    font-variation-settings: 'opsz' 4;
  } @else {
    font-variation-settings: 'opsz' $type;
  }
}

@mixin clampSize($minFont, $maxFont, $maxContent: metric.$max-width, $margins:0) {
  $clamp: ( math.div($maxFont, ($maxContent + $margins)) * 100 ) * 1vw;
  font-size: clamp($minFont, $clamp, $maxFont);
}


