/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Button Component Styles
 * ═══════════════════════════════════════════════════════════
 * Amélioration visuelle complète des boutons avec identité Lions.dev
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * Priority: CRITIQUE #1
 * ═══════════════════════════════════════════════════════════
 */

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

// ============================================
// 🎯 BASE BUTTON STYLES
// ============================================

.ui-button {
  @include lions-button-base;
  @include lions-button-size('base');
  @include lions-button-solid($lions-blue-500, $lions-blue-700);

  // Override PrimeFaces defaults
  font-family: $lions-font-family-primary !important;

  // Icon spacing
  .ui-button-icon-left {
    margin-right: $lions-spacing-2;
  }

  .ui-button-icon-right {
    margin-left: $lions-spacing-2;
  }
}

// ============================================
// 🎨 SEVERITY VARIANTS (Solid buttons)
// ============================================

// Primary (Lions Blue) - Default
.ui-button-primary,
.ui-button:not([class*="ui-button-"]) {
  @include lions-button-solid($lions-blue-500, $lions-blue-700);
}

// Secondary (Gray)
.ui-button-secondary {
  @include lions-button-solid($lions-gray-500, $lions-gray-700);
}

// Success (Green)
.ui-button-success {
  @include lions-button-solid($lions-success-500, $lions-success-700);
}

// Info (Cyan)
.ui-button-info {
  @include lions-button-solid($lions-info-500, $lions-info-700);
}

// Warning (Orange)
.ui-button-warning {
  @include lions-button-solid($lions-warning-500, $lions-warning-700);
}

// Help (Lions Gold - Premium)
.ui-button-help {
  @include lions-button-solid($lions-gold-500, $lions-gold-700);

  // Extra visual impact for premium actions
  font-weight: $lions-font-bold;
  letter-spacing: 0.025em;
}

// Danger (Red)
.ui-button-danger {
  @include lions-button-solid($lions-danger-500, $lions-danger-700);
}

// ============================================
// 📝 OUTLINED VARIANT
// ============================================

.ui-button.ui-button-outlined {
  &.ui-button-primary,
  &:not([class*="ui-button-"]) {
    @include lions-button-outlined($lions-blue-500);
  }

  &.ui-button-secondary {
    @include lions-button-outlined($lions-gray-600);
  }

  &.ui-button-success {
    @include lions-button-outlined($lions-success-500);
  }

  &.ui-button-info {
    @include lions-button-outlined($lions-info-500);
  }

  &.ui-button-warning {
    @include lions-button-outlined($lions-warning-500);
  }

  &.ui-button-help {
    @include lions-button-outlined($lions-gold-600);
  }

  &.ui-button-danger {
    @include lions-button-outlined($lions-danger-500);
  }
}

// ============================================
// 🔗 TEXT VARIANT
// ============================================

.ui-button.ui-button-text {
  &.ui-button-primary,
  &:not([class*="ui-button-"]) {
    @include lions-button-text($lions-blue-500);
  }

  &.ui-button-secondary {
    @include lions-button-text($lions-gray-600);
  }

  &.ui-button-success {
    @include lions-button-text($lions-success-500);
  }

  &.ui-button-info {
    @include lions-button-text($lions-info-500);
  }

  &.ui-button-warning {
    @include lions-button-text($lions-warning-500);
  }

  &.ui-button-help {
    @include lions-button-text($lions-gold-600);
  }

  &.ui-button-danger {
    @include lions-button-text($lions-danger-500);
  }
}

// ============================================
// 🔗 LINK VARIANT (Text sans background hover)
// ============================================

.ui-button.ui-button-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  color: $lions-blue-500;
  text-decoration: underline;
  text-underline-offset: 2px;

  &:hover {
    color: $lions-blue-700;
    transform: none;
    text-decoration: underline;
  }

  &:active {
    color: $lions-blue-800;
    transform: none;
  }

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

  // Severity variants for link
  &.ui-button-secondary {
    color: $lions-gray-700;
    &:hover { color: $lions-gray-900; }
  }

  &.ui-button-success {
    color: $lions-success-500;
    &:hover { color: $lions-success-700; }
  }

  &.ui-button-danger {
    color: $lions-danger-500;
    &:hover { color: $lions-danger-700; }
  }
}

// ============================================
// 🔵 ROUNDED VARIANT (Pill shape)
// ============================================

.ui-button.ui-button-rounded {
  border-radius: $lions-radius-full !important;
  padding-left: $lions-spacing-6 !important;
  padding-right: $lions-spacing-6 !important;
}

// ============================================
// 📐 RAISED VARIANT (Elevated)
// ============================================

.ui-button.ui-button-raised {
  @include lions-shadow('lg');

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

  &:active {
    @include lions-shadow('md');
    transform: translateY(-1px);
  }
}

// ============================================
// 📏 SIZE VARIANTS
// ============================================

.ui-button {
  // Small buttons
  &.ui-button-sm,
  &[data-size="sm"] {
    @include lions-button-size('sm');

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

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

  // Large buttons
  &.ui-button-lg,
  &[data-size="lg"] {
    @include lions-button-size('lg');

    .ui-button-icon-left {
      margin-right: $lions-spacing-3;
    }

    .ui-button-icon-right {
      margin-left: $lions-spacing-3;
    }
  }
}

// ============================================
// 🔄 LOADING STATE
// ============================================

.ui-button {
  &.ui-state-loading,
  &[aria-busy="true"] {
    position: relative;
    pointer-events: none;
    color: transparent !important;

    &::after {
      content: '';
      @include lions-spinner(1rem, $lions-white);
      @include lions-absolute-center;
    }
  }

  // Loading state for outlined/text buttons
  &.ui-button-outlined,
  &.ui-button-text {
    &.ui-state-loading,
    &[aria-busy="true"] {
      &::after {
        border-top-color: currentColor;
        border-color: rgba(currentColor, 0.25);
      }
    }
  }
}

// ============================================
// ❌ DISABLED STATE
// ============================================

.ui-button {
  &:disabled,
  &.ui-state-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

// ============================================
// 🎖️ BADGE SUPPORT
// ============================================

.ui-button {
  .ui-badge {
    position: absolute;
    top: -$lions-spacing-2;
    right: -$lions-spacing-2;
    min-width: $lions-spacing-5;
    height: $lions-spacing-5;
    line-height: $lions-spacing-5;
    border-radius: $lions-radius-full;
    background: $lions-danger-500;
    color: $lions-white;
    font-size: $lions-font-xs;
    font-weight: $lions-font-bold;
    padding: 0 $lions-spacing-1;

    &.ui-badge-success {
      background: $lions-success-500;
    }

    &.ui-badge-warning {
      background: $lions-warning-500;
    }

    &.ui-badge-info {
      background: $lions-info-500;
    }
  }
}

// ============================================
// 🎨 ICON-ONLY BUTTONS (Square)
// ============================================

.ui-button {
  &.ui-button-icon-only {
    width: $lions-button-height-base;
    padding: 0 !important;
    @include lions-flex-center;

    &.ui-button-sm,
    &[data-size="sm"] {
      width: $lions-button-height-sm;
    }

    &.ui-button-lg,
    &[data-size="lg"] {
      width: $lions-button-height-lg;
    }

    // Rounded icon-only buttons become circles
    &.ui-button-rounded {
      border-radius: $lions-radius-full !important;
    }
  }
}

// ============================================
// 🎯 BUTTON GROUP SUPPORT
// ============================================

.ui-buttonset {
  display: inline-flex;
  gap: 0;

  .ui-button {
    border-radius: 0;
    margin-left: -1px;

    &:first-child {
      margin-left: 0;
      border-top-left-radius: $lions-radius-base;
      border-bottom-left-radius: $lions-radius-base;
    }

    &:last-child {
      border-top-right-radius: $lions-radius-base;
      border-bottom-right-radius: $lions-radius-base;
    }

    &:hover,
    &:focus {
      z-index: 1;
    }
  }
}

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

.ui-button {
  // Ensure focus ring is always visible
  &:focus-visible {
    @include lions-focus-ring();
  }

  // High contrast mode support
  @media (prefers-contrast: high) {
    border-width: 2px !important;
  }

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

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

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

// Touch-friendly on mobile
@media (hover: none) and (pointer: coarse) {
  .ui-button {
    min-height: 44px; // iOS touch target minimum

    &.ui-button-sm {
      min-height: 40px;
    }
  }
}

// Smaller spacing on mobile
@include lions-responsive-custom($lions-breakpoint-md) {
  .ui-buttonset {
    gap: $lions-spacing-1;
  }
}
