@use 'sass:color';
@use 'variables' as *;

// Text Colors

.text-white {
  color: $white !important;
}

.text-black {
  color: $black !important;
}

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color !important;
  }

  .text-#{$name}-light {
    color: color.adjust($color, $lightness: 15%) !important;
  }

  .text-#{$name}-lighter {
    color: color.adjust($color, $lightness: 25%) !important;
  }

  .text-#{$name}-lightest {
    color: color.adjust($color, $lightness: 35%) !important;
  }

  .text-#{$name}-dark {
    color: color.adjust($color, $lightness: -15%) !important;
  }

  .text-#{$name}-darker {
    color: color.adjust($color, $lightness: -25%) !important;
  }

  .text-#{$name}-darkest {
    color: color.adjust($color, $lightness: -35%) !important;
  }
}

// Background Colors

.bg-white {
  background-color: $white !important;
}

.bg-black {
  background-color: $black !important;
}

.bg-transparent {
  background-color: transparent !important;
}

@each $name, $color in $colors {
  .bg-#{$name} {
    background-color: $color !important;
  }

  .bg-#{$name}-light {
    background-color: color.adjust($color, $lightness: 15%) !important;
  }

  .bg-#{$name}-lighter {
    background-color: color.adjust($color, $lightness: 25%) !important;
  }

  .bg-#{$name}-lightest {
    background-color: color.adjust($color, $lightness: 35%) !important;
  }

  .bg-#{$name}-dark {
    background-color: color.adjust($color, $lightness: -15%) !important;
  }

  .bg-#{$name}-darker {
    background-color: color.adjust($color, $lightness: -25%) !important;
  }

  .bg-#{$name}-darkest {
    background-color: color.adjust($color, $lightness: -35%) !important;
  }
}