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

$modal-border-scale:                $alert-border-scale !default; // default is -9
$modal-opacity:                     0.6 !default;

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

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

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

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

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

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