// Media Query Mixins
@mixin media-up($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @media (min-width: $breakpoint) {
      @content;
    }
  }
}

@mixin media-down($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
      @content;
    }
  } @else {
    @media (max-width: $breakpoint - 1px) {
      @content;
    }
  }
}

@mixin media-between($min, $max) {
  $min-width: map-get($breakpoints, $min);
  $max-width: map-get($breakpoints, $max);
  
  @media (min-width: $min-width) and (max-width: $max-width - 1px) {
    @content;
  }
}

@mixin media-only($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (max-width: map-get($breakpoints, 'md') - 1px) {
      @content;
    }
  } @else if $breakpoint == 'md' {
    @media (min-width: map-get($breakpoints, 'md')) and (max-width: map-get($breakpoints, 'lg') - 1px) {
      @content;
    }
  } @else if $breakpoint == 'lg' {
    @media (min-width: map-get($breakpoints, 'lg')) and (max-width: map-get($breakpoints, 'xl') - 1px) {
      @content;
    }
  } @else if $breakpoint == 'xl' {
    @media (min-width: map-get($breakpoints, 'xl')) and (max-width: map-get($breakpoints, '2xl') - 1px) {
      @content;
    }
  } @else if $breakpoint == '2xl' {
    @media (min-width: map-get($breakpoints, '2xl')) {
      @content;
    }
  }
}

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

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-center-column {
  @include flex-column;
  align-items: center;
  justify-content: center;
}

// Grid Utilities
@mixin grid-container($columns: 12, $gap: $spacing-base) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

@mixin grid-column($start, $end: null) {
  @if $end {
    grid-column: #{$start} / #{$end};
  } @else {
    grid-column: span #{$start};
  }
}

// Typography Mixins
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

@mixin font-size($size, $line-height: null) {
  font-size: $size;
  
  @if $line-height {
    line-height: $line-height;
  }
}

// Visual Effects
@mixin box-shadow($shadow: $shadow-base) {
  box-shadow: $shadow;
}

@mixin border-radius($radius: $border-radius-base) {
  border-radius: $radius;
}

@mixin transition($properties: all, $duration: 0.2s, $timing: ease-in-out) {
  transition: $properties $duration $timing;
}

// Position Utilities
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin absolute-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// Button Mixins
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: $font-weight-medium;
  text-decoration: none;
  user-select: none;
  @include transition();
  @include border-radius();
  
  &:focus {
    outline: 0.2rem solid transparent;
    outline-offset: 0.2rem;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
}

@mixin button-variant($bg-color, $text-color: #fff, $border-color: $bg-color) {
  background-color: $bg-color;
  border: 0.1rem solid $border-color;
  color: $text-color;
  
  &:hover:not(:disabled) {
    background-color: darken($bg-color, 8%);
    border-color: darken($border-color, 8%);
  }
  
  &:active:not(:disabled) {
    background-color: darken($bg-color, 12%);
    border-color: darken($border-color, 12%);
  }
}

// Form Mixins
@mixin form-control {
  display: block;
  width: 100%;
  padding: $spacing-sm $spacing-md;
  font-size: $font-size-base;
  line-height: $line-height-normal;
  color: $text-color;
  background-color: $bg-color;
  border: 0.1rem solid $border-color;
  @include border-radius();
  @include transition(border-color, box-shadow);
  
  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 0.3rem rgba($primary-color, 0.1);
  }
  
  &::placeholder {
    color: $text-light;
  }
  
  &:disabled {
    background-color: $bg-secondary;
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// Animation Mixins
@mixin fade-in($duration: 0.3s) {
  opacity: 0;
  animation: fadeIn $duration ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@mixin slide-up($duration: 0.3s) {
  transform: translateY(2rem);
  opacity: 0;
  animation: slideUp $duration ease-out forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// Responsive Typography
@mixin responsive-font($min-size, $max-size, $min-screen: 32rem, $max-screen: 120rem) {
  font-size: $min-size;
  
  @media (min-width: $min-screen) and (max-width: $max-screen) {
    font-size: calc(#{$min-size} + (#{strip-unit($max-size - $min-size)}) * ((100vw - #{$min-screen}) / #{strip-unit($max-screen - $min-screen)}));
  }
  
  @media (min-width: $max-screen) {
    font-size: $max-size;
  }
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  
  @return $number;
}