// Toast notifications container
.toastify {
  position: fixed !important;
  z-index: $z-toast !important;
  padding: $spacing-base $spacing-lg !important;
  border-radius: $border-radius-base !important;
  box-shadow: $shadow-xl !important;
  font-family: $font-family-base !important;
  font-size: $font-size-base !important;
  line-height: $line-height-normal !important;
  max-width: 40rem !important;
  min-width: 30rem !important;
  
  @include media-down('sm') {
    max-width: calc(100vw - 2rem) !important;
    min-width: auto !important;
    margin: 0 $spacing-base !important;
    right: $spacing-base !important;
    left: $spacing-base !important;
  }
  
  // Success variant
  &.toast-success {
    background: linear-gradient(135deg, $success-color 0%, darken($success-color, 10%) 100%) !important;
    color: white !important;
  }
  
  // Error variant
  &.toast-error {
    background: linear-gradient(135deg, $error-color 0%, darken($error-color, 10%) 100%) !important;
    color: white !important;
  }
  
  // Warning variant
  &.toast-warning {
    background: linear-gradient(135deg, $warning-color 0%, darken($warning-color, 10%) 100%) !important;
    color: white !important;
  }
  
  // Info variant
  &.toast-info {
    background: linear-gradient(135deg, $info-color 0%, darken($info-color, 10%) 100%) !important;
    color: white !important;
  }
  
  // Default variant
  &.toast-default {
    background: linear-gradient(135deg, $secondary-color 0%, darken($secondary-color, 10%) 100%) !important;
    color: white !important;
  }
}

// Enhanced toast with icons and titles
.toast-enhanced {
  display: flex !important;
  align-items: flex-start !important;
  gap: $spacing-sm !important;
  
  &__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-top: 0.2rem;
    font-size: $font-size-lg !important;
    font-weight: $font-weight-bold !important;
    
    svg {
      width: 100%;
      height: 100%;
      fill: currentColor;
    }
  }
  
  &__content {
    flex: 1;
    min-width: 0;
  }
  
  &__title {
    font-weight: $font-weight-semibold !important;
    margin-bottom: $spacing-xs !important;
    font-size: $font-size-base !important;
    line-height: $line-height-tight !important;
  }
  
  &__message {
    opacity: 0.9 !important;
    font-size: $font-size-sm !important;
    line-height: $line-height-normal !important;
    margin: 0 !important;
  }
  
  &__close {
    background: none !important;
    border: none !important;
    color: inherit !important;
    font-size: $font-size-lg !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease-in-out !important;
    flex-shrink: 0 !important;
    margin-left: $spacing-sm !important;
    border-radius: 50% !important;
    
    &:hover {
      opacity: 1 !important;
      background: rgba(255, 255, 255, 0.1) !important;
    }
    
    &::before {
      content: '×' !important;
      line-height: 1 !important;
    }
  }
}

// Toast animations
@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

// Apply animations to toastify
.toastify {
  animation: toastSlideIn 0.3s ease-out !important;
  
  &.toastify-close {
    animation: toastSlideOut 0.3s ease-in !important;
  }
}

// Progress bar for toast duration
.toast-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 0.3rem !important;
  background: rgba(255, 255, 255, 0.2) !important;
  width: 100% !important;
  border-radius: 0 0 $border-radius-base $border-radius-base !important;
  overflow: hidden !important;
  
  &__bar {
    height: 100% !important;
    background: rgba(255, 255, 255, 0.8) !important;
    width: 100% !important;
    animation: toastProgress linear !important;
    transform-origin: left center !important;
  }
}

@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

// Stack multiple toasts
.toastify:not(:last-child) {
  margin-bottom: $spacing-sm !important;
}