// ========================
// MIXINS SCSS
// ========================

@use 'variables' as *;

// Mixin pour les breakpoints responsive
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Breakpoint #{$breakpoint} not found in $breakpoints.";
  }
}

@mixin respond-above($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Breakpoint #{$breakpoint} not found in $breakpoints.";
  }
}

// Mixin pour les transitions
@mixin transition($properties: all, $duration: $transition-normal, $timing: ease) {
  transition: $properties $duration $timing;
}

// Mixin pour les ombres
@mixin box-shadow($level: medium) {
  @if $level == light {
    box-shadow: var(--shadow-light);
  } @else if $level == medium {
    box-shadow: var(--shadow-medium);
  } @else if $level == large {
    box-shadow: var(--shadow-large);
  }
}

// Mixin pour les cartes
@mixin card($padding: 32px, $radius: $border-radius-large, $shadow: light) {
  background: var(--bg-primary);
  padding: $padding;
  border-radius: $radius;
  @include box-shadow($shadow);
  @include transition(transform, $transition-normal);

  &:hover {
    transform: translateY(-4px);
    @include box-shadow(medium);
  }
}

// Mixin pour les boutons
@mixin button-base {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: $border-radius;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  @include transition();
  font-size: map-get($font-sizes, base);
}

@mixin button-primary {
  @include button-base;
  background: $primary-color;
  color: white;
  @include box-shadow(medium);

  &:hover {
    background: $primary-hover;
    transform: translateY(-2px);
    @include box-shadow(large);
  }
}

@mixin button-secondary {
  @include button-base;
  background: transparent;
  color: $primary-color;
  border: 2px solid $primary-color;

  &:hover {
    background: $primary-color;
    color: white;
    transform: translateY(-2px);
  }
}

// Mixin pour les grilles responsive
@mixin grid-responsive($min-width: 300px, $gap: 32px) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
  gap: $gap;
}

// Mixin pour le texte dégradé
@mixin gradient-text($color1: $primary-color, $color2: $accent-color, $direction: 135deg) {
  background: linear-gradient($direction, $color1, $color2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// Mixin pour centrer flex
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Mixin pour masquer visuellement (accessibilité)
@mixin visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

// Mixin pour les focus accessibles
@mixin focus-style {
  outline: 2px solid $primary-color;
  outline-offset: 2px;
  border-radius: 4px;
}

// Mixin pour l'animation d'apparition
@mixin fade-in-animation($duration: 0.6s, $delay: 0s) {
  opacity: 0;
  animation: fadeIn $duration ease-out $delay forwards;
}

// Mixin pour les barres de progression
@mixin progress-bar($height: 8px, $bg-color: var(--bg-secondary)) {
  height: $height;
  background: $bg-color;
  border-radius: $height / 2;
  overflow: hidden;

  .progress-fill {
    height: 100%;
    border-radius: $height / 2;
    @include transition(width, $transition-slow);
  }
}

// Mixin pour les icônes avec background
@mixin icon-container($size: 60px, $bg-color: $primary-color, $radius: $border-radius) {
  width: $size;
  height: $size;
  border-radius: $radius;
  @include flex-center;
  background-color: #{$bg-color}20;
  color: $bg-color;
}

// Mixin pour les tags/badges
@mixin tag($padding: 6px 12px, $bg-color: var(--bg-secondary), $text-color: var(--text-secondary)) {
  padding: $padding;
  background: $bg-color;
  border-radius: 20px;
  font-size: map-get($font-sizes, xs);
  font-weight: 500;
  color: $text-color;
  @include transition();
}

// Mixin pour les liens avec effet hover
@mixin link-hover($color: $primary-color) {
  position: relative;
  @include transition(color);

  &:hover {
    color: $color;
  }

  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: $color;
    @include transition(width);
  }

  &:hover::after {
    width: 100%;
  }
}

// Mixin pour les scrollbars personnalisées
@mixin custom-scrollbar($width: 8px, $track-color: var(--bg-secondary), $thumb-color: var(--text-muted)) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: 4px;
    @include transition(background-color);

    &:hover {
      background: var(--text-secondary);
    }
  }

  // Support Firefox
  scrollbar-width: thin;
  scrollbar-color: $thumb-color $track-color;
}