@import url('./variables.css');

/* stylelint-disable function-whitespace-after, at-rule-no-unknown */
@each $color in red, orange, yellow, green, cyan, blue, indigo, purple, pink, gray {
  @each $i in 1, 2, 3, 4, 5 {
    .is-bg-$(color)-$(i) {
      color: var(--text-color) !important;
    }
  }

  @each $i in 6, 7, 8, 9, 10, 11, 12 {
    .is-bg-$(color)-$(i) {
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }
}

@each $color in red, orange, yellow, green, cyan, blue, indigo, purple, pink, gray {
  @each $light, $i in 100, 97, 92, 85, 77, 68, 57, 52, 45, 37, 29, 20, 10 {
    .is-text-$(color)-$(i) {
      color: color(var(--$(color)) l($(light)%)) !important;
    }
    .is-bg-$(color)-$(i) {
      background-color: color(var(--$(color)) l($(light)%)) !important;
    }
  }
}

.is-text-white {
  color: color(#f00 blackness(+20%)) !important;
}

.is-text-black {
  color: var(--black) !important;
}

.is-text-dark {
  color: var(--dark) !important;
}

.is-text-primary {
  color: var(--primary-color) !important;
}

.is-bg-white {
  background-color: #fff !important;
}

.is-bg-black {
  background-color: var(--black) !important;
}