@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .color-#{$state} {
    --#{$prefix}alert-color: #{$alert-color};
    --#{$prefix}alert-bg: #{$alert-color};
    --#{$prefix}alert-border-color: #{$alert-border};

    // @todo: remove .alert-link  and enable line below when 5.2 is removed.
    //--#{$prefix}alert-link-color: shade-color($alert-color, 20%);

    .alert-link {
      color: shade-color($alert-color, 20%);
    }
  }


}
