/**
 * Generate utilities for a name and color combination.
 */ 
@mixin generate-color-utilities($name, $color) {
  .text-#{$name} {
    color: $color !important;
  }
  .fill-#{$name},
  .fill-hover-#{$name}:hover {
    fill: $color !important;
  }
  .bg-#{$name} {
    background-color: $color !important;

    /**
     * For `.bg-blue-*` variants we introduce visual distinction
     * since the color is likely similar to `$link-color`
     */
    $is-blue: map-get($blues, $name);
    @if $is-blue {
      a:not(.bg-white > a, .bg-white) {
        font-weight: bold;
      }
    }
  }
}

@each $name, $color in $blues {
  @include generate-color-utilities($name, $color);
}

@each $color, $value in $theme-colors {
  .fill-#{$color},
  .fill-hover-#{$color}:hover {
    fill: $value !important;
  }
}

@each $name, $color in $grays {
  @include generate-color-utilities($name, $color);
}

/**
 * There are known contrast ratio issues with some `.bg-blue-*` and `$link-color`
 * combinations. We attempt to provide acceptable overrides when an `<a>` is 
 * placed inside a `.bg-blue-*` parent element.
 */
$contrast-link-overrides: (
    "color": #005580,
    "background-colors": ("blue-200", "blue-300")
), (
    "color": #E0F5FF,
    "background-colors": ("blue-400", "blue-500")
), (
    "color": #6CF,
    "background-colors": ("blue-600", "blue-700", "blue-800")
);

@each $override in $contrast-link-overrides {
  @each $bg-color in map-get($override, "background-colors") {
    $color: map-get($override, "color");

    .bg-#{$bg-color} {
      a:not(.bg-white > a, .bg-white) {
        color: $color;

        .icon {
          fill: $color;
        }

        &:hover {
          color: adjust-color($color, $lightness: -15%);

          .icon {
            fill: adjust-color($color, $lightness: -15%);
          }
        }
      }
    }
  }
}

.text-color-initial {
  color: initial !important;
}

.fill-white {
  fill: $white !important;
}