// Alert Customizations - SDGA Custom Enhancements
// Following Bootstrap 5.3 recommended practices

// ============================================
// ALERT VARIANTS - Using Sass map and @each loop
// ============================================

// Define alert color variants
$alert-variants: (
  "primary": (border-color: rgba($primary-600, 0.7),
    bg: $primary-25,
    border: $primary-200,
    icon-bg: $primary-50,
    icon-color: $primary-700,
    title-color: $primary-700,
    mobile-border-top: $primary-600 ),
  "lavender": (border-color: rgba($lavender-600, 0.7),
    bg: $lavender-25,
    border: $lavender-200,
    icon-bg: $lavender-50,
    icon-color: $lavender-700,
    title-color: $lavender-700,
    mobile-border-top: rgba($lavender-600, 0.7)),
  "neutral": (border-color: rgba($neutral-300, 0.7),
    bg: $neutral-25,
    border: $neutral-300,
    icon-bg: $neutral-50,
    icon-color: $black,
    title-color: $black,
    mobile-border-top: rgba($neutral-300, 0.7)),
  "success": (border-color: rgba($success-600, 0.7),
    bg: $success-25,
    border: $success-200,
    icon-bg: $success-50,
    icon-color: $success-700,
    title-color: $success-700,
    mobile-border-top: rgba($success-600, 0.7)),
  "danger": (border-color: rgba($danger-600, 0.7),
    bg: $danger-25,
    border: $danger-200,
    icon-bg: $danger-50,
    icon-color: $danger-700,
    title-color: $danger-700,
    mobile-border-top: rgba($danger-600, 0.7)),
  "warning": (border-color: rgba($warning-600, 0.7),
    bg: $warning-25,
    border: $warning-200,
    icon-bg: $warning-50,
    icon-color: $warning-700,
    title-color: $warning-700,
    mobile-border-top: rgba($warning-600, 0.7)),
  "info": (border-color: rgba($info-600, 0.7),
    bg: $info-25,
    border: $info-200,
    icon-bg: $info-50,
    icon-color: $info-700,
    title-color: $info-700,
    mobile-border-top: rgba($info-600, 0.7)),
  "secondary": (border-color: rgba($secondary-200, 0.7),
    bg: $secondary-25,
    border: $secondary-200,
    icon-bg: $secondary-50,
    icon-color: $black,
    title-color: $black,
    mobile-border-top: rgba($secondary-200, 0.7))
);

// ============================================
// ALERT BASE STYLES
// ============================================

.alert {
  background-color: $alert-bg;
  border: $alert-border-width solid;
  border-color: $alert-border-color;
  border-inline-start-width: .5rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: $gray-700;

  .alert-icon {
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: $alert-icon-color;
    font-size: 1.5rem;

    &::after {
      content: '';
      width: 2.5rem;
      height: 2.5rem;
      border-radius: $radius-full;
      background-color: $alert-icon-bg;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 1;
    }
  }

  .alert-title {
    display: block;
    color: $alert-title-color;
    margin-bottom: .5rem;
    font-weight: $font-weight-semibold;
  }

  &.alert-dismissible {
    padding-right: unset;
    padding-inline-end: $alert-dismissible-padding-r;
    padding-inline-start: $alert-padding-x;
    
    .btn-close {
      right: unset;
      inset-inline-end: 0;
    }
  }

  // Generate alert variant classes
  @each $name, $colors in $alert-variants {
    &.alert-#{$name} {
      border-inline-start-color: map-get($colors, border-color);
      --#{$prefix}alert-bg: #{map-get($colors, bg)};
      --#{$prefix}border-color: #{map-get($colors, border)};
      --#{$prefix}alert-icon-bg: #{map-get($colors, icon-bg)};
      --#{$prefix}alert-icon-color: #{map-get($colors, icon-color)};
      --#{$prefix}alert-title-color: #{map-get($colors, title-color)};
    }
  }

  &.alert-side {
    --#{$prefix}alert-bg: #{$body-bg};
    --#{$prefix}border-color: #{$gray-200};
    --#{$prefix}alert-title-color: #{$gray-800};
  }

  .alert-footer {
    display: flex;
    gap: 1.25rem;
    margin-top: 1rem;
    margin-inline-start: -0.75rem;
  }


  // ============================================
  // MOBILE RESPONSIVE
  // ============================================
  @media (max-width: $mobile) {
    flex-direction: column;
    gap: 1rem;
    border-inline-start-width: $alert-border-width;
    border-top-width: 0.5rem;
    position: relative;

    @each $name, $colors in $alert-variants {
      &.alert-#{$name} {
        border-inline-start-color: $alert-border-color;
        border-top-color: map-get($colors, mobile-border-top);

        &.alert-side {
          border-top-color: map-get($colors, border-color);
        }
      }
    }

    div {
      width: 100%;
    }

    .alert-footer {
      flex-direction: column;
      margin-inline-start: 0;


      button {
        width: 100%;
        justify-content: center;

        &:first-of-type {
          --#{$prefix}btn-color: #{$black};
          --#{$prefix}btn-bg: #{$secondary-100};
          --#{$prefix}btn-border-color: #{$secondary-100};
          --#{$prefix}btn-hover-color: #{$black};
          --#{$prefix}btn-hover-bg: #{$secondary-200};
          --#{$prefix}btn-hover-border-color: #{$secondary-200};
          --#{$prefix}btn-focus-shadow-rgb: null;
          --#{$prefix}btn-active-color: #{$black};
          --#{$prefix}btn-active-bg: #{$secondary-200};
          --#{$prefix}btn-active-border-color: #{$secondary-200};
          --#{$prefix}btn-disabled-color: #{$secondary-400};
          --#{$prefix}btn-disabled-bg: #{$secondary-200};
          --#{$prefix}btn-disabled-border-color: #{$secondary-200};
        }
      }
    }

    &.alert-dismissible {
      padding: $alert-padding-y $alert-padding-x;
    }
  }
}