/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Display Component Styles
 * ═══════════════════════════════════════════════════════════
 * Styles pour Avatar, Badge, Tag et composants d'affichage
 *
 * Version: 1.0.0
 * Date: 2 Janvier 2026
 * Author: Lions Development Team
 * Priority: HAUTE #34-36
 * ═══════════════════════════════════════════════════════════
 */

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

// ============================================
// 👤 AVATAR STYLES
// ============================================

.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  @include lions-transition();

  // Base avatar (40px)
  width: 2.5rem;
  height: 2.5rem;
  @include lions-rounded('full');
  @include lions-gradient-blue;
  color: $lions-white;
  @include lions-font-weight('semibold');
  @include lions-font-size('base');

  // Avatar image
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  // Avatar label/initials
  .ui-avatar-text {
    @include lions-font-weight('semibold');
    text-transform: uppercase;
    user-select: none;
  }

  // Avatar icon
  .ui-avatar-icon {
    font-size: 1.25rem;
  }

  // Size variants
  &.ui-avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    @include lions-font-size('xs');

    .ui-avatar-icon {
      font-size: 0.75rem;
    }
  }

  &.ui-avatar-sm {
    width: 2rem;
    height: 2rem;
    @include lions-font-size('sm');

    .ui-avatar-icon {
      font-size: 1rem;
    }
  }

  &.ui-avatar-lg {
    width: 3rem;
    height: 3rem;
    @include lions-font-size('lg');

    .ui-avatar-icon {
      font-size: 1.5rem;
    }
  }

  &.ui-avatar-xl {
    width: 4rem;
    height: 4rem;
    @include lions-font-size('xl');

    .ui-avatar-icon {
      font-size: 2rem;
    }
  }

  // Shape variants
  &.ui-avatar-circle {
    @include lions-rounded('full');
  }

  &.ui-avatar-square {
    @include lions-rounded(0);
  }

  &.ui-avatar-rounded {
    @include lions-rounded('lg');
  }

  // Severity variants
  &.ui-avatar-secondary {
    background: $lions-gray-500;
  }

  &.ui-avatar-success {
    @include lions-gradient-success;
  }

  &.ui-avatar-info {
    @include lions-gradient-info;
  }

  &.ui-avatar-warning {
    @include lions-gradient-warning;
  }

  &.ui-avatar-danger {
    @include lions-gradient-danger;
  }

  // Avatar group
  &-group {
    display: inline-flex;

    .ui-avatar {
      margin-left: -0.5rem;
      border: 2px solid $lions-white;
      @include lions-shadow('sm');

      &:first-child {
        margin-left: 0;
      }

      &:hover {
        z-index: 10;
        transform: scale(1.1);
      }
    }
  }

  // Status indicator
  &-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.75rem;
    height: 0.75rem;
    @include lions-rounded('full');
    border: 2px solid $lions-white;

    &-online {
      background: $lions-success-500;
    }

    &-offline {
      background: $lions-gray-400;
    }

    &-busy {
      background: $lions-danger-500;
    }

    &-away {
      background: $lions-warning-500;
    }
  }
}

// ============================================
// 🏷️ BADGE STYLES
// ============================================

.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  @include lions-rounded('md');
  @include lions-font-size('xs');
  @include lions-font-weight('semibold');
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  @include lions-transition();

  // Default (primary)
  background: $lions-blue-100;
  color: $lions-blue-700;

  // Severity variants
  &.ui-badge-secondary {
    background: $lions-gray-100;
    color: $lions-gray-700;
  }

  &.ui-badge-success {
    background: $lions-success-100;
    color: $lions-success-700;
  }

  &.ui-badge-info {
    background: $lions-info-100;
    color: $lions-info-700;
  }

  &.ui-badge-warning {
    background: $lions-warning-100;
    color: $lions-warning-700;
  }

  &.ui-badge-danger {
    background: $lions-danger-100;
    color: $lions-danger-700;
  }

  // Size variants
  &.ui-badge-sm {
    padding: 0.125rem 0.375rem;
    @include lions-font-size('2xs');
  }

  &.ui-badge-lg {
    padding: 0.375rem 0.75rem;
    @include lions-font-size('sm');
  }

  // Pill variant
  &.ui-badge-pill {
    @include lions-rounded('full');
  }

  // Dot variant
  &.ui-badge-dot {
    padding: 0;
    width: 0.5rem;
    height: 0.5rem;
    @include lions-rounded('full');

    &.ui-badge-sm {
      width: 0.375rem;
      height: 0.375rem;
    }

    &.ui-badge-lg {
      width: 0.625rem;
      height: 0.625rem;
    }
  }

  // Outlined variant
  &.ui-badge-outlined {
    background: transparent;
    border: 1px solid currentColor;

    &.ui-badge-primary {
      color: $lions-blue-600;
      border-color: $lions-blue-600;
    }

    &.ui-badge-secondary {
      color: $lions-gray-600;
      border-color: $lions-gray-600;
    }

    &.ui-badge-success {
      color: $lions-success-600;
      border-color: $lions-success-600;
    }

    &.ui-badge-info {
      color: $lions-info-600;
      border-color: $lions-info-600;
    }

    &.ui-badge-warning {
      color: $lions-warning-600;
      border-color: $lions-warning-600;
    }

    &.ui-badge-danger {
      color: $lions-danger-600;
      border-color: $lions-danger-600;
    }
  }

  // Overlay badge (for icons, avatars)
  &-overlay {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    @include lions-rounded('full');
    @include lions-shadow('sm');
  }
}

// Badge on button
.ui-button {
  position: relative;

  .ui-badge-overlay {
    top: -0.5rem;
    right: -0.5rem;
  }
}

// ============================================
// 🔖 TAG STYLES
// ============================================

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: $lions-spacing-2;
  padding: 0.375rem 0.75rem;
  @include lions-rounded('md');
  @include lions-font-size('sm');
  @include lions-font-weight('medium');
  line-height: 1.5;
  vertical-align: middle;
  @include lions-transition();

  // Default (primary)
  background: $lions-blue-100;
  color: $lions-blue-700;

  // Tag icon
  .ui-tag-icon {
    font-size: 1rem;
    line-height: 1;

    &.ui-tag-icon-left {
      margin-right: -$lions-spacing-1;
    }

    &.ui-tag-icon-right {
      margin-left: -$lions-spacing-1;
    }
  }

  // Tag value
  .ui-tag-value {
    line-height: 1.5;
  }

  // Close button
  .ui-tag-close {
    @include lions-button-base;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    padding: 0;
    @include lions-flex-center;
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.6;
    cursor: pointer;
    @include lions-rounded('full');
    @include lions-transition();

    &:hover {
      opacity: 1;
      background: rgba($lions-black, 0.1);
    }

    &:active {
      transform: scale(0.9);
    }

    .ui-icon {
      font-size: 0.75rem;
    }
  }

  // Severity variants
  &.ui-tag-secondary {
    background: $lions-gray-100;
    color: $lions-gray-700;
  }

  &.ui-tag-success {
    background: $lions-success-100;
    color: $lions-success-700;
  }

  &.ui-tag-info {
    background: $lions-info-100;
    color: $lions-info-700;
  }

  &.ui-tag-warning {
    background: $lions-warning-100;
    color: $lions-warning-700;
  }

  &.ui-tag-danger {
    background: $lions-danger-100;
    color: $lions-danger-700;
  }

  // Size variants
  &.ui-tag-sm {
    padding: 0.25rem 0.5rem;
    @include lions-font-size('xs');

    .ui-tag-icon {
      font-size: 0.875rem;
    }

    .ui-tag-close {
      width: 0.875rem;
      height: 0.875rem;

      .ui-icon {
        font-size: 0.625rem;
      }
    }
  }

  &.ui-tag-lg {
    padding: 0.5rem 1rem;
    @include lions-font-size('base');

    .ui-tag-icon {
      font-size: 1.125rem;
    }

    .ui-tag-close {
      width: 1.125rem;
      height: 1.125rem;

      .ui-icon {
        font-size: 0.875rem;
      }
    }
  }

  // Pill variant
  &.ui-tag-pill {
    @include lions-rounded('full');
  }

  // Outlined variant
  &.ui-tag-outlined {
    background: transparent;
    border: 1px solid currentColor;

    &.ui-tag-primary {
      color: $lions-blue-600;
      border-color: $lions-blue-600;
    }

    &.ui-tag-secondary {
      color: $lions-gray-600;
      border-color: $lions-gray-600;
    }

    &.ui-tag-success {
      color: $lions-success-600;
      border-color: $lions-success-600;
    }

    &.ui-tag-info {
      color: $lions-info-600;
      border-color: $lions-info-600;
    }

    &.ui-tag-warning {
      color: $lions-warning-600;
      border-color: $lions-warning-600;
    }

    &.ui-tag-danger {
      color: $lions-danger-600;
      border-color: $lions-danger-600;
    }

    .ui-tag-close:hover {
      background: rgba(currentColor, 0.1);
    }
  }
}

// Tag group
.ui-tag-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: $lions-spacing-2;
  align-items: center;
}

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

@media (max-width: $lions-breakpoint-md) {
  .ui-avatar {
    &.ui-avatar-xl {
      width: 3rem;
      height: 3rem;
      @include lions-font-size('lg');
    }
  }

  .ui-avatar-group {
    .ui-avatar {
      margin-left: -0.375rem;
    }
  }

  .ui-tag-group {
    gap: $lions-spacing-1;
  }
}

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

.ui-avatar,
.ui-badge,
.ui-tag {
  // High contrast mode
  @media (prefers-contrast: high) {
    border: 2px solid currentColor !important;
  }

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

// ============================================
// 🎨 UTILITY CLASSES
// ============================================

// Avatar with border
.ui-avatar-bordered {
  border: 2px solid $lions-white;
  @include lions-shadow('md');
}

// Badge pulse animation
.ui-badge-pulse {
  animation: lions-badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes lions-badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// Tag removable
.ui-tag-removable {
  padding-right: $lions-spacing-2;
}
