@mixin toast-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .alert-link {
    color: darken($color, 10%);
  }
}

$toast-min-width:                   250px;
$toast-border-scale:                $alert-border-scale !default; // default is -9
$toast-opacity:                     0.6 !default;

$toast-body-bg-scale:               $alert-bg-scale !default; // default is -10
$toast-body-color-scale:            $alert-color-scale !default; // default is 6

$toast-header-bg-scale:             $alert-bg-scale + 2 !default;
$toast-header-color-scale:          $alert-color-scale + 2 !default;

.toast {
  min-width: $toast-min-width;
  @each $state, $value in $theme-colors {
    &.toast-#{$state} {
      
      $toast-border-color: shift-color($value, $toast-border-scale);

      $toast-body-bg: rgba(shift-color($value, $toast-body-bg-scale), $toast-opacity);
      $toast-body-color: shift-color($value, $toast-body-color-scale);

      $toast-header-bg: rgba(shift-color($value, $toast-header-bg-scale), $toast-opacity);
      $toast-header-color: shift-color($value, $toast-header-color-scale);

      @include toast-variant($toast-body-bg, $toast-border-color, $toast-body-color);
      .toast-header {
        @include toast-variant($toast-header-bg, $toast-border-color, $toast-header-color);
        .btn-close {
          // opacity: 1;
          color: $toast-header-color;
        }
      }
    }
  }
}