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

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

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

// ============================================
// TOAST BASE STYLES
// ============================================
.toast-container {
    position: fixed;
    inset-inline-end: 1rem;
    top: 1rem;
    z-index: $zindex-toast;
}
.toast {
    position: relative;
    border-inline-start-width: .5rem;
    min-width: $toast-max-width;
    box-shadow: $toast-box-shadow;
    padding: $toast-padding-y $toast-padding-x;
    padding-inline-end: $toast-padding-x * 3;
    display: flex;
    align-items: flex-start;
    gap: .75rem;

    .btn-close {
        position: absolute;
        top: 1rem;
        right: unset;
        inset-inline-end: 1.5rem;
    }
    .toast-content {
        width: 100%;
    }

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

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

    .toast-header {
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 0;
        margin-bottom: .25rem;
    }

    .toast-body {
        padding: 0;
    }


    .toast-footer {
        margin-inline-start: -.5rem;
        margin-top: 1rem;
        display: flex;
        gap: .5rem;
     }


    // ============================================
    // TOAST VARIANTS
    // ============================================

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

    // ============================================
    // MOBILE RESPONSIVE
    // ============================================
    @media (max-width: $mobile) {
        border-inline-start-width: $toast-border-width;
        padding-inline-end: $toast-padding-x;
        border-top-width: 0.5rem;
        min-width: 100%;
        width: 100%;
        flex-direction: column;

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

        .toast-footer {
            flex-direction: column;
            gap: 0.75rem;
            margin-inline-start: 0;

            button {
                --#{$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};
            }
        }
    }
}