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

@mixin glow($color) {
  border: 2px solid color.adjust($color, $lightness: -5%);
  box-shadow: 0px 0px 10px 0px $color;
}

@each $name, $hex in colors.$colors {
  @each $weight, $percentage in colors.$palette {
    @if $weight < 100 {
      .glow-#{'' + $name}-#{'0' + $weight} {
        @include glow(color.adjust($hex, $lightness: $percentage));
      }
    } @else if ($weight < 500) {
      .glow-#{'' + $name}-#{$weight} {
        @include glow(color.adjust($hex, $lightness: $percentage));
      }
    } @else if ($weight > 500) {
      .glow-#{'' + $name}-#{$weight} {
        @include glow(color.adjust($hex, $lightness: -$percentage));
      }
    } @else {
      .glow-#{'' + $name}-#{$weight} {
        @include glow($hex);
      }
    }
  }
}