@use 'sass:map' as map;
@use 'sass:color' as color;

@mixin supports-font-variables {
  @supports (font-variation-settings: normal) {
    @content;
  }
}

@mixin box {
  box-shadow: var(--shadow);
  background-color: var(--fff);
  border-radius: var(--box-radius);
}

@mixin onlyInDarkMode {
  $parent-selector: &;
  @at-root [dark='true'] #{$parent-selector} {
    @content;
  }
}
@mixin onlyInLightMode {
  $parent-selector: &;
  @at-root :not([dark='true']) #{$parent-selector} {
    @content;
  }
}

@function get-hex-number($n) {
  $hex-chars: (
    10: 'a',
    11: 'b',
    12: 'c',
    13: 'd',
    14: 'e',
    15: 'f',
  );
  @if map.has-key($hex-chars, $n) {
    $n: map.get($hex-chars, $n);
  }
  @return $n;
}

@function add-var-lightness-to-palette($palette) {
  @each $shade, $_c in $palette {
    @if $shade != contrast {
      $c: hsl(color.hue($_c) color.saturation($_c) var(--lightness-#{$shade}));
      $palette: map.set($palette, $shade, $c);
    }
  }
  @return $palette;
}