/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Messages & Notifications Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour Messages, Toast, Growl et composants de notification
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * Priority: CRITIQUE #18-20
 * ═══════════════════════════════════════════════════════════
 */

@import '../variables';
@import '../mixins';

// ============================================
// 💬 MESSAGES BASE STYLES
// ============================================

.ui-messages,
.ui-message {
  @include lions-rounded('md');
  padding: $lions-spacing-4 $lions-spacing-5;
  margin-bottom: $lions-spacing-3;
  display: flex;
  align-items: flex-start;
  gap: $lions-spacing-3;
  @include lions-transition();
  border-left: 4px solid;
  @include lions-shadow('sm');

  // Icon
  .ui-messages-icon,
  .ui-message-icon {
    font-size: 1.5rem;
    margin-top: 2px;
    flex-shrink: 0;
  }

  // Content
  .ui-messages-detail,
  .ui-message-detail,
  .ui-messages-summary,
  .ui-message-summary {
    @include lions-font-size('base');
    margin: 0;
    line-height: $lions-line-height-normal;
  }

  .ui-messages-summary,
  .ui-message-summary {
    @include lions-font-weight('bold');
    margin-bottom: $lions-spacing-1;
  }

  .ui-messages-detail,
  .ui-message-detail {
    @include lions-font-weight('normal');
  }

  // Close button
  .ui-messages-close,
  .ui-message-close {
    @include lions-button-base;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    @include lions-flex-center;
    background: transparent;
    border: none;
    margin-left: auto;
    flex-shrink: 0;
    @include lions-transition();

    &:hover {
      transform: scale(1.1);
    }

    &:focus-visible {
      @include lions-focus-ring();
    }
  }
}

// ============================================
// 🎨 MESSAGE SEVERITY VARIANTS
// ============================================

// Info messages
.ui-messages-info,
.ui-message-info {
  background: rgba($lions-info-50, 0.9);
  border-left-color: $lions-info-500;
  color: $lions-info-900;

  .ui-messages-icon,
  .ui-message-icon {
    color: $lions-info-600;
  }

  .ui-messages-close,
  .ui-message-close {
    color: $lions-info-700;

    &:hover {
      background: rgba($lions-info-200, 0.8);
    }
  }
}

// Success messages
.ui-messages-success,
.ui-message-success {
  background: rgba($lions-success-50, 0.9);
  border-left-color: $lions-success-500;
  color: $lions-success-900;

  .ui-messages-icon,
  .ui-message-icon {
    color: $lions-success-600;
  }

  .ui-messages-close,
  .ui-message-close {
    color: $lions-success-700;

    &:hover {
      background: rgba($lions-success-200, 0.8);
    }
  }
}

// Warning messages
.ui-messages-warn,
.ui-message-warn {
  background: rgba($lions-warning-50, 0.9);
  border-left-color: $lions-warning-500;
  color: $lions-warning-900;

  .ui-messages-icon,
  .ui-message-icon {
    color: $lions-warning-600;
  }

  .ui-messages-close,
  .ui-message-close {
    color: $lions-warning-700;

    &:hover {
      background: rgba($lions-warning-200, 0.8);
    }
  }
}

// Error messages
.ui-messages-error,
.ui-message-error {
  background: rgba($lions-danger-50, 0.9);
  border-left-color: $lions-danger-500;
  color: $lions-danger-900;

  .ui-messages-icon,
  .ui-message-icon {
    color: $lions-danger-600;
  }

  .ui-messages-close,
  .ui-message-close {
    color: $lions-danger-700;

    &:hover {
      background: rgba($lions-danger-200, 0.8);
    }
  }
}

// ============================================
// 🔔 TOAST / GROWL NOTIFICATIONS
// ============================================

.ui-toast,
.ui-growl {
  position: fixed;
  z-index: 9999;

  .ui-toast-message,
  .ui-growl-item {
    @include lions-rounded('lg');
    @include lions-shadow('xl');
    margin-bottom: $lions-spacing-3;
    overflow: hidden;
    background: $lions-white;
    border-left: 6px solid;
    min-width: 300px;
    max-width: 400px;
    @include lions-transition(all, 300ms);

    &:hover {
      @include lions-shadow('2xl');
      transform: translateY(-2px);
    }
  }

  .ui-toast-message-content,
  .ui-growl-item-container {
    padding: $lions-spacing-4 $lions-spacing-5;
    display: flex;
    align-items: flex-start;
    gap: $lions-spacing-3;
  }

  // Icon
  .ui-toast-icon,
  .ui-growl-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    margin-top: 2px;
  }

  // Text container
  .ui-toast-message-text,
  .ui-growl-message {
    flex: 1;
    min-width: 0;

    .ui-toast-summary,
    .ui-growl-title {
      @include lions-font-size('lg');
      @include lions-font-weight('bold');
      margin: 0 0 $lions-spacing-1 0;
      line-height: $lions-line-height-tight;
    }

    .ui-toast-detail,
    .ui-growl-detail {
      @include lions-font-size('base');
      margin: 0;
      line-height: $lions-line-height-normal;
      color: $lions-text-secondary;
    }
  }

  // Close button
  .ui-toast-icon-close,
  .ui-growl-icon-close {
    @include lions-button-base;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    @include lions-flex-center;
    background: transparent;
    border: none;
    flex-shrink: 0;
    @include lions-transition();
    cursor: pointer;

    &:hover {
      transform: scale(1.15) rotate(90deg);
    }

    &:focus-visible {
      @include lions-focus-ring();
    }
  }
}

// ============================================
// 🎨 TOAST/GROWL SEVERITY VARIANTS
// ============================================

.ui-toast,
.ui-growl {
  // Info notifications
  .ui-toast-message-info,
  .ui-growl-item-info {
    border-left-color: $lions-info-500;
    background: linear-gradient(135deg, rgba($lions-info-50, 0.95) 0%, $lions-white 100%);

    .ui-toast-icon,
    .ui-growl-icon {
      color: $lions-info-600;
    }

    .ui-toast-summary,
    .ui-growl-title {
      color: $lions-info-800;
    }

    .ui-toast-icon-close,
    .ui-growl-icon-close {
      color: $lions-info-700;

      &:hover {
        background: rgba($lions-info-200, 0.6);
      }
    }
  }

  // Success notifications
  .ui-toast-message-success,
  .ui-growl-item-success {
    border-left-color: $lions-success-500;
    background: linear-gradient(135deg, rgba($lions-success-50, 0.95) 0%, $lions-white 100%);

    .ui-toast-icon,
    .ui-growl-icon {
      color: $lions-success-600;
    }

    .ui-toast-summary,
    .ui-growl-title {
      color: $lions-success-800;
    }

    .ui-toast-icon-close,
    .ui-growl-icon-close {
      color: $lions-success-700;

      &:hover {
        background: rgba($lions-success-200, 0.6);
      }
    }
  }

  // Warning notifications
  .ui-toast-message-warn,
  .ui-growl-item-warn {
    border-left-color: $lions-warning-500;
    background: linear-gradient(135deg, rgba($lions-warning-50, 0.95) 0%, $lions-white 100%);

    .ui-toast-icon,
    .ui-growl-icon {
      color: $lions-warning-600;
    }

    .ui-toast-summary,
    .ui-growl-title {
      color: $lions-warning-800;
    }

    .ui-toast-icon-close,
    .ui-growl-icon-close {
      color: $lions-warning-700;

      &:hover {
        background: rgba($lions-warning-200, 0.6);
      }
    }
  }

  // Error notifications
  .ui-toast-message-error,
  .ui-growl-item-error {
    border-left-color: $lions-danger-500;
    background: linear-gradient(135deg, rgba($lions-danger-50, 0.95) 0%, $lions-white 100%);

    .ui-toast-icon,
    .ui-growl-icon {
      color: $lions-danger-600;
    }

    .ui-toast-summary,
    .ui-growl-title {
      color: $lions-danger-800;
    }

    .ui-toast-icon-close,
    .ui-growl-icon-close {
      color: $lions-danger-700;

      &:hover {
        background: rgba($lions-danger-200, 0.6);
      }
    }
  }
}

// ============================================
// 📍 TOAST/GROWL POSITIONS
// ============================================

.ui-toast,
.ui-growl {
  &.ui-toast-top-right,
  &.ui-growl-top-right {
    top: $lions-spacing-5;
    right: $lions-spacing-5;
  }

  &.ui-toast-top-left,
  &.ui-growl-top-left {
    top: $lions-spacing-5;
    left: $lions-spacing-5;
  }

  &.ui-toast-bottom-right,
  &.ui-growl-bottom-right {
    bottom: $lions-spacing-5;
    right: $lions-spacing-5;
  }

  &.ui-toast-bottom-left,
  &.ui-growl-bottom-left {
    bottom: $lions-spacing-5;
    left: $lions-spacing-5;
  }

  &.ui-toast-top-center,
  &.ui-growl-top-center {
    top: $lions-spacing-5;
    left: 50%;
    transform: translateX(-50%);
  }

  &.ui-toast-bottom-center,
  &.ui-growl-bottom-center {
    bottom: $lions-spacing-5;
    left: 50%;
    transform: translateX(-50%);
  }

  &.ui-toast-center,
  &.ui-growl-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// ============================================
// ✨ TOAST/GROWL ANIMATIONS
// ============================================

@keyframes lions-toast-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lions-toast-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.ui-toast-message,
.ui-growl-item {
  animation: lions-toast-fade-in 300ms ease-out;

  &.ui-toast-message-exit,
  &.ui-state-leaving {
    animation: lions-toast-fade-out 200ms ease-in;
  }
}

// ============================================
// 📱 RESPONSIVE ADJUSTMENTS
// ============================================

@media (max-width: $lions-breakpoint-md) {
  .ui-toast,
  .ui-growl {
    &.ui-toast-top-right,
    &.ui-toast-top-left,
    &.ui-toast-bottom-right,
    &.ui-toast-bottom-left,
    &.ui-growl-top-right,
    &.ui-growl-top-left,
    &.ui-growl-bottom-right,
    &.ui-growl-bottom-left {
      left: $lions-spacing-3 !important;
      right: $lions-spacing-3 !important;
      transform: none !important;
    }

    .ui-toast-message,
    .ui-growl-item {
      min-width: auto;
      max-width: none;
    }
  }

  .ui-messages,
  .ui-message {
    padding: $lions-spacing-3 $lions-spacing-4;
    @include lions-font-size('sm');

    .ui-messages-icon,
    .ui-message-icon {
      font-size: 1.25rem;
    }
  }
}

// ============================================
// ♿ ACCESSIBILITY ENHANCEMENTS
// ============================================

.ui-messages,
.ui-message,
.ui-toast-message,
.ui-growl-item {
  // High contrast mode
  @media (prefers-contrast: high) {
    border-width: 3px !important;
  }

  // Reduced motion
  @media (prefers-reduced-motion: reduce) {
    transition: none !important;
    animation: none !important;

    &:hover {
      transform: none !important;
    }
  }
}

// ARIA live regions
[role="alert"],
[aria-live] {
  // Ensure screen readers can access messages
  &:empty {
    display: none;
  }
}

// ============================================
// 🎯 MESSAGE LIST STYLES
// ============================================

.ui-messages {
  &.ui-messages-list {
    .ui-messages-item {
      margin-bottom: $lions-spacing-2;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// ============================================
// 🔧 UTILITY CLASSES
// ============================================

// Compact messages
.ui-messages-compact,
.ui-message-compact {
  padding: $lions-spacing-2 $lions-spacing-3;

  .ui-messages-icon,
  .ui-message-icon {
    font-size: 1.25rem;
  }

  .ui-messages-summary,
  .ui-message-summary {
    @include lions-font-size('sm');
  }

  .ui-messages-detail,
  .ui-message-detail {
    @include lions-font-size('xs');
  }
}

// Large messages
.ui-messages-large,
.ui-message-large {
  padding: $lions-spacing-5 $lions-spacing-6;

  .ui-messages-icon,
  .ui-message-icon {
    font-size: 2rem;
  }

  .ui-messages-summary,
  .ui-message-summary {
    @include lions-font-size('xl');
  }

  .ui-messages-detail,
  .ui-message-detail {
    @include lions-font-size('lg');
  }
}

// Inline messages (no margin)
.ui-messages-inline,
.ui-message-inline {
  margin: 0;
  display: inline-flex;
}
