.alert {
  border-collapse: separate !important;
  border: 0;
  width: 100%;
  & > tbody > tr > td {
    padding: 0.75 * $font-size-base 1.25 * $font-size-base;
    border: 1px solid transparent;
    border-radius: 0.25 * $font-size-base;
  }
}

@each $color, $value in $theme-colors {
  .alert-#{$color} td {
    background-color: lighten($value, 40%);
    border-color: lighten($value, 35%);
    color: darken($value, 30%);
    .hr > table > tbody > tr > td {
      border-top: 1px solid lighten($value, 35%);
    }
  }
}