// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 文本省略
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 居中对齐
@mixin center($type: both) {
  position: absolute;
  @if $type == both {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if $type == horizontal {
    left: 50%;
    transform: translateX(-50%);
  } @else if $type == vertical {
    top: 50%;
    transform: translateY(-50%);
  }
}

// Flex 布局
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// Flex 居中
@mixin flex-center {
  @include flex(row, center, center);
}

// 响应式断点
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: #{$breakpoint-sm - 1px}) {
      @content;
    }
  } @else if $breakpoint == sm {
    @media (min-width: #{$breakpoint-sm}) {
      @content;
    }
  } @else if $breakpoint == md {
    @media (min-width: #{$breakpoint-md}) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media (min-width: #{$breakpoint-lg}) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media (min-width: #{$breakpoint-xl}) {
      @content;
    }
  } @else if $breakpoint == 2xl {
    @media (min-width: #{$breakpoint-2xl}) {
      @content;
    }
  }
}

// 按钮样式
@mixin button-variant($bg-color, $text-color: $white, $border-color: $bg-color) {
  background-color: $bg-color;
  color: $text-color;
  border: 1px solid $border-color;
  
  &:hover {
    background-color: darken($bg-color, 5%);
    border-color: darken($border-color, 5%);
  }
  
  &:active {
    background-color: darken($bg-color, 10%);
    border-color: darken($border-color, 10%);
  }
  
  &:disabled {
    background-color: lighten($bg-color, 20%);
    border-color: lighten($border-color, 20%);
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 输入框样式
@mixin input-variant($border-color: $input-border-color, $focus-color: $input-focus-border-color) {
  border: $input-border-width solid $border-color;
  border-radius: $input-border-radius;
  padding: $input-padding-y $input-padding-x;
  font-size: $font-size-base;
  line-height: $line-height-normal;
  transition: border-color $transition-base ease-in-out, box-shadow $transition-base ease-in-out;
  
  &:focus {
    outline: none;
    border-color: $focus-color;
    box-shadow: $input-focus-box-shadow;
  }
  
  &:disabled {
    background-color: $gray-100;
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 卡片样式
@mixin card($padding: $card-padding, $radius: $card-border-radius, $shadow: $card-shadow) {
  background-color: $white;
  border-radius: $radius;
  padding: $padding;
  box-shadow: $shadow;
  border: 1px solid $card-border-color;
}

// 头像样式
@mixin avatar($size: $avatar-size-base) {
  width: $size;
  height: $size;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 徽章样式
@mixin badge($bg-color: $primary-color, $text-color: $white) {
  display: inline-block;
  padding: $badge-padding-y $badge-padding-x;
  font-size: $badge-font-size;
  font-weight: $font-weight-medium;
  line-height: 1;
  color: $text-color;
  background-color: $bg-color;
  border-radius: $badge-border-radius;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}

// 加载动画
@mixin loading-spinner($size: $loading-size, $color: $loading-color) {
  width: $size;
  height: $size;
  border: 2px solid rgba($color, 0.2);
  border-top: 2px solid $color;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 渐变背景
@mixin gradient-bg($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 阴影效果
@mixin box-shadow($shadow: $shadow-base) {
  box-shadow: $shadow;
}

// 过渡动画
@mixin transition($property: all, $duration: $transition-base, $timing: $ease-in-out) {
  transition: $property $duration $timing;
}

// 隐藏滚动条
@mixin hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

// 自定义滚动条
@mixin custom-scrollbar($width: 6px, $track-color: $gray-100, $thumb-color: $gray-300) {
  &::-webkit-scrollbar {
    width: $width;
  }
  
  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $width / 2;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;
    
    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}

// 安全区域适配
@mixin safe-area-inset($property, $direction: bottom) {
  #{$property}: constant(safe-area-inset-#{$direction});
  #{$property}: env(safe-area-inset-#{$direction});
}

// 1px 边框解决方案
@mixin border-1px($color: $border-color, $direction: bottom) {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    #{$direction}: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: $color;
    transform: scaleY(0.5);
    transform-origin: 0 #{$direction};
  }
}

// 毛玻璃效果
@mixin backdrop-blur($blur: 10px, $bg-color: rgba(255, 255, 255, 0.8)) {
  background-color: $bg-color;
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
}

// 文字渐变
@mixin text-gradient($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}