@import "../../defaults";   // Global component defaults.

// Override default bootstrap alert variables.
$alert-border-width: 0;
$alert-border-radius: 0.125rem;
$alert-padding-y: 0.9375rem;
$alert-padding-x: 0.9375rem;

@import "../../../node_modules/bootstrap/scss/alert";

// Change default bootstrap alert style.

// Custom style for the alert dismissible close button.
.alert-dismissible {
  .btn-close {
    --bs-btn-close-opacity: 1;
    -webkit-mask-image: var(--bs-btn-close-bg) !important;
    mask-image: var(--bs-btn-close-bg) !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    padding: 0.225rem !important;
    margin: 1.22rem !important;
  }
}

// Custom color for each alert dismissible alert colors.
// with default, shade, or tint colors over alert theme colors.
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    &.alert-dismissible {

      @if $color == "light" { 
        .btn-close {
          background: shade-color($value, $btn-active-bg-shade-amount);
        }
      } @else if $color == "dark" {
        .btn-close {
          background: tint-color($value, $btn-active-bg-tint-amount);
        }
      } @else if $color == "warning" {
        .btn-close {
          background: if($color == $color-contrast-light, shade-color($value, $btn-active-bg-shade-amount), tint-color($value, $btn-active-bg-tint-amount));
        }
      } @else if $color == "danger" {
        .btn-close {
          background: shade-color($value, $btn-active-bg-shade-amount);
        }
      } @else {
        .btn-close {
          background: $value;
        }
      }
    }
  }
}
