/* ========================================
   Mixins 工具类库
   常用的 SCSS Mixin 函数
   ======================================== */

@import './design-tokens.scss';

/* ========== Flex布局 Flexbox Layout ========== */

// Flex容器 - 行布局
@mixin flex-row($justify: flex-start, $align: center) {
  display: flex;
  flex-direction: row;
  justify-content: $justify;
  align-items: $align;
}

// Flex容器 - 列布局
@mixin flex-column($justify: flex-start, $align: stretch) {
  display: flex;
  flex-direction: column;
  justify-content: $justify;
  align-items: $align;
}

// Flex居中
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Flex两端对齐
@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// Flex环绕对齐
@mixin flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ========== 文本省略 Text Ellipsis ========== */

// 单行文本省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本省略
@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* ========== 毛玻璃效果 Glassmorphism ========== */

// 毛玻璃背景
@mixin glass-bg($blur: 20rpx, $opacity: 0.9) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
}

// 毛玻璃卡片
@mixin glass-card($blur: 20rpx, $opacity: 0.9, $border: true) {
  @include glass-bg($blur, $opacity);
  @if $border {
    border: 1rpx solid rgba(255, 255, 255, 0.3);
  }
  box-shadow: $shadow-md;
}

/* ========== 渐变背景 Gradient Background ========== */

// 主色渐变
@mixin gradient-primary {
  background: $gradient-primary;
}

// 辅助色渐变
@mixin gradient-secondary {
  background: $gradient-secondary;
}

// 自定义渐变
@mixin gradient-custom($start, $end, $angle: 135deg) {
  background: linear-gradient($angle, $start, $end);
}

/* ========== 卡片样式 Card Styles ========== */

// 基础卡片
@mixin card-base {
  background: $bg-card;
  border-radius: $radius-md;
  padding: $spacing-xl;
  box-shadow: $shadow-sm;
}

// 悬浮卡片
@mixin card-elevated {
  @include card-base;
  box-shadow: $shadow-md;
  transition: $transition-all;

  &:active {
    transform: scale(0.98);
    box-shadow: $shadow-sm;
  }
}

// 扁平卡片
@mixin card-flat {
  background: $bg-card;
  border-radius: $radius-md;
  padding: $spacing-xl;
  border: 1rpx solid $border-base;
}

/* ========== 按钮样式 Button Styles ========== */

// 按钮基础样式
@mixin btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-base;
  font-size: $font-base;
  font-weight: $font-medium;
  transition: $transition-all;
  border: none;
  cursor: pointer;

  &:active {
    transform: scale(0.95);
  }
}

// 主按钮
@mixin btn-primary {
  @include btn-base;
  background: $gradient-primary;
  color: $text-inverse;
  box-shadow: $shadow-primary;
}

// 次按钮
@mixin btn-secondary {
  @include btn-base;
  background: $gradient-secondary;
  color: $text-inverse;
  box-shadow: $shadow-secondary;
}

// 描边按钮
@mixin btn-outline($color: $primary-color) {
  @include btn-base;
  background: transparent;
  color: $color;
  border: 1rpx solid $color;
}

/* ========== 响应式字体 Responsive Font ========== */

// 响应式字体大小
@mixin responsive-font($min-size, $max-size, $min-width: 320px, $max-width: 750px) {
  font-size: calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}) / (#{$max-width} - #{$min-width})));
}

/* ========== 安全区域 Safe Area ========== */

// 顶部安全区域
@mixin safe-area-top($padding: 0) {
  padding-top: calc(#{$padding} + #{$safe-area-top});
}

// 底部安全区域
@mixin safe-area-bottom($padding: 0) {
  padding-bottom: calc(#{$padding} + #{$safe-area-bottom});
}

// 左侧安全区域
@mixin safe-area-left($padding: 0) {
  padding-left: calc(#{$padding} + #{$safe-area-left});
}

// 右侧安全区域
@mixin safe-area-right($padding: 0) {
  padding-right: calc(#{$padding} + #{$safe-area-right});
}

/* ========== 固定定位 Fixed Position ========== */

// 固定在顶部
@mixin fixed-top($z-index: $z-fixed) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: $z-index;
}

// 固定在底部
@mixin fixed-bottom($z-index: $z-fixed) {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $z-index;
}

/* ========== 绝对居中 Absolute Center ========== */

// 绝对居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 垂直居中
@mixin absolute-vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 水平居中
@mixin absolute-horizontal-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ========== 清除浮动 Clearfix ========== */

@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* ========== 隐藏滚动条 Hide Scrollbar ========== */

@mixin hide-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========== 图片占位 Image Placeholder ========== */

// 图片容器（保持宽高比）
@mixin image-container($ratio: 1) {
  position: relative;
  width: 100%;
  padding-bottom: calc(100% / #{$ratio});
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ========== 骨架屏动画 Skeleton Animation ========== */

@mixin skeleton-loading {
  background: linear-gradient(90deg, $gray-100 25%, $gray-50 50%, $gray-100 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========== 脉冲动画 Pulse Animation ========== */

@mixin pulse-animation($duration: 2s) {
  animation: pulse $duration ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ========== 淡入动画 Fade In Animation ========== */

@mixin fade-in($duration: 0.3s) {
  animation: fadeIn $duration ease-in-out;
}

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

/* ========== 滑入动画 Slide In Animation ========== */

@mixin slide-up($duration: 0.3s) {
  animation: slideUp $duration ease-out;
}

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

/* ========== 缩放动画 Scale Animation ========== */

@mixin scale-in($duration: 0.3s) {
  animation: scaleIn $duration $ease-bounce;
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 触觉反馈 Haptic Feedback ========== */

@mixin haptic-feedback {
  &:active {
    transform: scale(0.95);
    transition: transform $transition-fast $ease-out;
  }
}

/* ========== 禁用状态 Disabled State ========== */

@mixin disabled-state {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
