/*
 * ═══════════════════════════════════════════════════════════
 * Lions.dev - Mixins SCSS
 * ═══════════════════════════════════════════════════════════
 * Mixins réutilisables pour composants Lions.dev
 *
 * Version: 1.0.0
 * Date: 1er Janvier 2026
 * Author: Lions Development Team
 * ═══════════════════════════════════════════════════════════
 */

@import 'variables';

// ============================================
// 📱 RESPONSIVE BREAKPOINTS
// ============================================

@mixin lions-responsive-sm {
  @media (min-width: $lions-breakpoint-sm) {
    @content;
  }
}

@mixin lions-responsive-md {
  @media (min-width: $lions-breakpoint-md) {
    @content;
  }
}

@mixin lions-responsive-lg {
  @media (min-width: $lions-breakpoint-lg) {
    @content;
  }
}

@mixin lions-responsive-xl {
  @media (min-width: $lions-breakpoint-xl) {
    @content;
  }
}

@mixin lions-responsive-2xl {
  @media (min-width: $lions-breakpoint-2xl) {
    @content;
  }
}

// Responsive custom breakpoint
@mixin lions-responsive-custom($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// ============================================
// 🎨 GRADIENTS
// ============================================

@mixin lions-gradient-blue {
  background: linear-gradient(135deg, $lions-blue-500 0%, $lions-blue-700 100%);
}

@mixin lions-gradient-gold {
  background: linear-gradient(135deg, $lions-gold-500 0%, $lions-gold-700 100%);
}

@mixin lions-gradient-success {
  background: linear-gradient(135deg, $lions-success-500 0%, $lions-success-700 100%);
}

@mixin lions-gradient-warning {
  background: linear-gradient(135deg, $lions-warning-500 0%, $lions-warning-700 100%);
}

@mixin lions-gradient-danger {
  background: linear-gradient(135deg, $lions-danger-500 0%, $lions-danger-700 100%);
}

@mixin lions-gradient-info {
  background: linear-gradient(135deg, $lions-info-500 0%, $lions-info-700 100%);
}

// Gradient custom
@mixin lions-gradient-custom($color-start, $color-end, $angle: 135deg) {
  background: linear-gradient($angle, $color-start 0%, $color-end 100%);
}

// ============================================
// 🎯 OMBRES
// ============================================

@mixin lions-shadow($level: 'base') {
  @if $level == 'xs' {
    box-shadow: $lions-shadow-xs;
  } @else if $level == 'sm' {
    box-shadow: $lions-shadow-sm;
  } @else if $level == 'base' {
    box-shadow: $lions-shadow-base;
  } @else if $level == 'md' {
    box-shadow: $lions-shadow-md;
  } @else if $level == 'lg' {
    box-shadow: $lions-shadow-lg;
  } @else if $level == 'xl' {
    box-shadow: $lions-shadow-xl;
  } @else if $level == '2xl' {
    box-shadow: $lions-shadow-2xl;
  }
}

// Shadow colorée
@mixin lions-shadow-color($color, $opacity: 0.25) {
  box-shadow: 0 4px 16px rgba($color, $opacity);
}

// ============================================
// 🔲 BORDER RADIUS
// ============================================

@mixin lions-rounded($size: 'base') {
  @if $size == 'none' {
    border-radius: $lions-radius-none;
  } @else if $size == 'sm' {
    border-radius: $lions-radius-sm;
  } @else if $size == 'base' {
    border-radius: $lions-radius-base;
  } @else if $size == 'md' {
    border-radius: $lions-radius-md;
  } @else if $size == 'lg' {
    border-radius: $lions-radius-lg;
  } @else if $size == 'xl' {
    border-radius: $lions-radius-xl;
  } @else if $size == '2xl' {
    border-radius: $lions-radius-2xl;
  } @else if $size == 'full' {
    border-radius: $lions-radius-full;
  }
}

// ============================================
// 🌀 TRANSITIONS
// ============================================

@mixin lions-transition($properties: all, $duration: $lions-transition-base, $easing: $lions-ease-in-out) {
  transition: $properties $duration $easing;
}

// ============================================
// ♿ FOCUS RING
// ============================================

@mixin lions-focus-ring($color: $lions-blue-500, $opacity: 0.4) {
  outline: 3px solid rgba($color, $opacity);
  outline-offset: 2px;
}

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

// ============================================
// 📐 SIZING
// ============================================

@mixin lions-size($width, $height: $width) {
  width: $width;
  height: $height;
}

// Square
@mixin lions-square($size) {
  @include lions-size($size, $size);
}

// Circle
@mixin lions-circle($size) {
  @include lions-square($size);
  border-radius: $lions-radius-full;
}

// ============================================
// 📏 SPACING
// ============================================

@mixin lions-padding($value) {
  padding: $value;
}

@mixin lions-padding-x($value) {
  padding-left: $value;
  padding-right: $value;
}

@mixin lions-padding-y($value) {
  padding-top: $value;
  padding-bottom: $value;
}

@mixin lions-margin($value) {
  margin: $value;
}

@mixin lions-margin-x($value) {
  margin-left: $value;
  margin-right: $value;
}

@mixin lions-margin-y($value) {
  margin-top: $value;
  margin-bottom: $value;
}

// ============================================
// 🔤 TYPOGRAPHY
// ============================================

@mixin lions-font-size($size: 'base') {
  @if $size == 'xs' {
    font-size: $lions-font-xs;
  } @else if $size == 'sm' {
    font-size: $lions-font-sm;
  } @else if $size == 'base' {
    font-size: $lions-font-base;
  } @else if $size == 'lg' {
    font-size: $lions-font-lg;
  } @else if $size == 'xl' {
    font-size: $lions-font-xl;
  } @else if $size == '2xl' {
    font-size: $lions-font-2xl;
  } @else if $size == '3xl' {
    font-size: $lions-font-3xl;
  } @else if $size == '4xl' {
    font-size: $lions-font-4xl;
  } @else if $size == '5xl' {
    font-size: $lions-font-5xl;
  }
}

@mixin lions-font-weight($weight: 'regular') {
  @if $weight == 'light' {
    font-weight: $lions-font-light;
  } @else if $weight == 'regular' {
    font-weight: $lions-font-regular;
  } @else if $weight == 'medium' {
    font-weight: $lions-font-medium;
  } @else if $weight == 'semibold' {
    font-weight: $lions-font-semibold;
  } @else if $weight == 'bold' {
    font-weight: $lions-font-bold;
  } @else if $weight == 'extrabold' {
    font-weight: $lions-font-extrabold;
  } @else if $weight == 'black' {
    font-weight: $lions-font-black;
  }
}

// Truncate text with ellipsis
@mixin lions-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Line clamp (multiline truncate)
@mixin lions-line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// ============================================
// 🎨 BUTTON VARIANTS
// ============================================

@mixin lions-button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $lions-spacing-2;
  font-family: $lions-font-family-primary;
  @include lions-font-weight('semibold');
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: $lions-button-border-width solid transparent;
  @include lions-rounded('base');
  @include lions-transition();

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

@mixin lions-button-size($size: 'base') {
  @if $size == 'sm' {
    height: $lions-button-height-sm;
    padding: 0 $lions-button-padding-x-sm;
    @include lions-font-size('sm');
  } @else if $size == 'base' {
    height: $lions-button-height-base;
    padding: 0 $lions-button-padding-x-base;
    @include lions-font-size('base');
  } @else if $size == 'lg' {
    height: $lions-button-height-lg;
    padding: 0 $lions-button-padding-x-lg;
    @include lions-font-size('lg');
  }
}

@mixin lions-button-solid($color: $lions-blue-500, $color-dark: $lions-blue-700) {
  @include lions-gradient-custom($color, $color-dark);
  color: $lions-white;
  @include lions-shadow-color($color, 0.25);

  &:hover {
    transform: translateY(-2px);
    @include lions-shadow-color($color, 0.35);
    @include lions-gradient-custom(darken($color, 5%), darken($color-dark, 5%));
  }

  &:active {
    transform: translateY(0);
    @include lions-shadow-color($color, 0.2);
  }

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

@mixin lions-button-outlined($color: $lions-blue-500) {
  background: transparent;
  border-color: $color;
  color: darken($color, 10%);
  box-shadow: none;

  &:hover {
    background: rgba($color, 0.1);
    border-color: darken($color, 10%);
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
    background: rgba($color, 0.15);
  }

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

@mixin lions-button-text($color: $lions-blue-500) {
  background: transparent;
  border: none;
  color: darken($color, 10%);
  box-shadow: none;

  &:hover {
    background: rgba($color, 0.1);
  }

  &:active {
    background: rgba($color, 0.15);
  }

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

// ============================================
// 📝 FORM FIELD VARIANTS
// ============================================

@mixin lions-input-base {
  width: 100%;
  font-family: $lions-font-family-primary;
  @include lions-font-size('base');
  color: $lions-text-primary;
  background: $lions-white;
  border: $lions-input-border-width solid $lions-gray-300;
  @include lions-rounded('base');
  @include lions-transition();

  &::placeholder {
    color: $lions-gray-400;
  }

  &:hover {
    border-color: $lions-gray-400;
  }

  &:focus {
    outline: none;
    border-color: $lions-blue-500;
    box-shadow: 0 0 0 3px rgba($lions-blue-500, 0.15);
  }

  &:disabled {
    background: $lions-gray-100;
    cursor: not-allowed;
    opacity: 0.6;
  }
}

@mixin lions-input-size($size: 'base') {
  @if $size == 'sm' {
    height: $lions-input-height-sm;
    padding: 0 $lions-spacing-3;
    @include lions-font-size('sm');
  } @else if $size == 'base' {
    height: $lions-input-height-base;
    padding: $lions-input-padding-y $lions-input-padding-x;
  } @else if $size == 'lg' {
    height: $lions-input-height-lg;
    padding: $lions-spacing-4 $lions-spacing-5;
    @include lions-font-size('lg');
  }
}

@mixin lions-input-state-error {
  border-color: $lions-danger-500;
  box-shadow: 0 0 0 3px rgba($lions-danger-500, 0.15);

  &:focus {
    border-color: $lions-danger-500;
    box-shadow: 0 0 0 3px rgba($lions-danger-500, 0.15);
  }
}

@mixin lions-input-state-success {
  border-color: $lions-success-500;
  box-shadow: 0 0 0 3px rgba($lions-success-500, 0.15);

  &:focus {
    border-color: $lions-success-500;
    box-shadow: 0 0 0 3px rgba($lions-success-500, 0.15);
  }
}

// ============================================
// 🎴 CARD & PANEL
// ============================================

@mixin lions-card {
  background: $lions-white;
  border: 1px solid $lions-gray-200;
  @include lions-rounded('md');
  @include lions-shadow('base');
  @include lions-padding($lions-card-padding);
  @include lions-transition();

  &:hover {
    @include lions-shadow('md');
  }
}

// ============================================
// 🔄 LOADING SPINNER
// ============================================

@mixin lions-spinner($size: 1rem, $color: $lions-blue-500) {
  display: inline-block;
  @include lions-size($size);
  border: 2px solid rgba($color, 0.25);
  border-top-color: $color;
  border-radius: $lions-radius-full;
  animation: lions-spin 0.6s linear infinite;
}

@keyframes lions-spin {
  to {
    transform: rotate(360deg);
  }
}

// ============================================
// 📊 TABLE
// ============================================

@mixin lions-table-base {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid $lions-gray-200;
  @include lions-rounded('md');
  overflow: hidden;
}

@mixin lions-table-header {
  background: $lions-gray-100;
  @include lions-font-weight('semibold');
  color: $lions-text-primary;
  padding: $lions-spacing-4;
  border-bottom: 2px solid $lions-gray-300;
  text-align: left;
}

@mixin lions-table-cell {
  padding: $lions-spacing-4;
  border-bottom: 1px solid $lions-gray-200;
  color: $lions-text-primary;
}

@mixin lions-table-row-hover {
  &:hover {
    background: rgba($lions-blue-50, 0.5);
  }
}

// ============================================
// 🎭 UTILITIES
// ============================================

// Visually hidden (screen reader only)
@mixin lions-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

// Reset list styles
@mixin lions-list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

// Clearfix
@mixin lions-clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// Center element absolutely
@mixin lions-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Flexbox center
@mixin lions-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Grid center
@mixin lions-grid-center {
  display: grid;
  place-items: center;
}
