@use "sass:map";
@use "sass:list";

// ============================================================================
// Design Tokens SCSS Mixins - 响应式断点专用
// 由 Terrazzo 自动生成 - 请勿手动编辑
//
// 这个文件只包含响应式断点相关的 SCSS mixins
// 其他功能（颜色、间距、阴影等）请使用 functions.scss 中的函数
//
// 使用方法:
//   @import 'path/to/functions'; // 先导入函数
//   @import 'path/to/mixins';    // 再导入 mixins
//
//   .my-component {
//     @include up('md') {
//       padding: spacing(4);           // 使用函数
//       background: color('background.default'); // 使用函数
//     }
//   }
// ============================================================================

// 注意：这些 mixins 主要用于媒体查询，其他样式请使用 functions.scss
// 正确的导入顺序:
// @import 'path/to/functions';  // functions 提供: color(), spacing(), shadow() 等
// @import 'path/to/mixins';     // mixins 提供: up(), down(), between() 等

// ============================================================================
// Responsive & Breakpoint Mixins - 响应式和断点 Mixins
// 与 CSS-in-JS 版本功能完全一致，提供 SCSS mixin 接口
// ============================================================================

/// 断点值映射
$breakpoints: (
  "xs": 475px,
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "2xl": 1536px
) !default;

/// 生成 min-width 媒体查询
/// @param {String} $breakpoint - 断点名称或数值
/// @param {String} $type - 媒体查询类型，默认为 'screen'
/// @example
///   @include up('md') {
///     display: block;
///   }
@mixin up($breakpoint, $type: 'screen') {
  $value: null;
  
  @if type-of($breakpoint) == number {
    $value: $breakpoint;
  } @else if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
  } @else {
    @error "断点 '#{$breakpoint}' 不存在。可用断点: #{map-keys($breakpoints)}";
  }
  
  @media #{$type} and (min-width: #{$value / 16}rem) {
    @content;
  }
}

/// 生成 max-width 媒体查询
/// @param {String} $breakpoint - 断点名称或数值
/// @param {String} $type - 媒体查询类型，默认为 'screen'
/// @example
///   @include down('md') {
///     display: none;
///   }
@mixin down($breakpoint, $type: 'screen') {
  $value: null;
  
  @if type-of($breakpoint) == number {
    $value: $breakpoint;
  } @else if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
  } @else {
    @error "断点 '#{$breakpoint}' 不存在。可用断点: #{map-keys($breakpoints)}";
  }
  
  $max-value: ($value - 0.02) / 16;
  @media #{$type} and (max-width: #{$max-value}rem) {
    @content;
  }
}

/// 生成范围媒体查询 (min-width 和 max-width)
/// @param {String} $min-breakpoint - 最小断点
/// @param {String} $max-breakpoint - 最大断点
/// @param {String} $type - 媒体查询类型，默认为 'screen'
/// @example
///   @include between('sm', 'lg') {
///     padding: 2rem;
///   }
@mixin between($min-breakpoint, $max-breakpoint, $type: 'screen') {
  $min-value: null;
  $max-value: null;
  
  @if type-of($min-breakpoint) == number {
    $min-value: $min-breakpoint;
  } @else if map-has-key($breakpoints, $min-breakpoint) {
    $min-value: map-get($breakpoints, $min-breakpoint);
  } @else {
    @error "最小断点 '#{$min-breakpoint}' 不存在。可用断点: #{map-keys($breakpoints)}";
  }
  
  @if type-of($max-breakpoint) == number {
    $max-value: $max-breakpoint;
  } @else if map-has-key($breakpoints, $max-breakpoint) {
    $max-value: map-get($breakpoints, $max-breakpoint);
  } @else {
    @error "最大断点 '#{$max-breakpoint}' 不存在。可用断点: #{map-keys($breakpoints)}";
  }
  
  $min-rem: $min-value / 16;
  $max-rem: ($max-value - 0.02) / 16;
  
  @media #{$type} and (min-width: #{$min-rem}rem) and (max-width: #{$max-rem}rem) {
    @content;
  }
}

/// 生成精确断点媒体查询 (只在特定断点范围内)
/// @param {String} $breakpoint - 断点名称
/// @param {String} $type - 媒体查询类型，默认为 'screen'
/// @example
///   @include only('md') {
///     font-size: 1.2rem;
///   }
@mixin only($breakpoint, $type: 'screen') {
  @if not map-has-key($breakpoints, $breakpoint) {
    @error "断点 '#{$breakpoint}' 不存在。可用断点: #{map-keys($breakpoints)}";
  }
  
  $breakpoint-keys: map-keys($breakpoints);
  $current-index: index($breakpoint-keys, $breakpoint);
  
  @if $current-index == length($breakpoint-keys) {
    // 如果是最大的断点，只使用 min-width
    @include up($breakpoint, $type) {
      @content;
    }
  } @else {
    // 使用下一个断点作为上界
    $next-breakpoint: nth($breakpoint-keys, $current-index + 1);
    @include between($breakpoint, $next-breakpoint, $type) {
      @content;
    }
  }
}

/// 移动设备优先的媒体查询（xs 及以上）
/// @example
///   @include mobile {
///     font-size: 0.875rem;
///   }
@mixin mobile {
  @include up('xs') {
    @content;
  }
}

/// 平板设备媒体查询（md 到 lg）
/// @example
///   @include tablet {
///     padding: 1.5rem;
///   }
@mixin tablet {
  @include between('md', 'lg') {
    @content;
  }
}

/// 桌面设备媒体查询（lg 及以上）
/// @example
///   @include desktop {
///     display: grid;
///   }
@mixin desktop {
  @include up('lg') {
    @content;
  }
}

/// 打印媒体查询
/// @example
///   @include print {
///     display: none;
///   }
@mixin print {
  @media print {
    @content;
  }
}

/// 容器最大宽度 mixin
/// @param {String} $breakpoint - 断点名称
/// @example
///   .container {
///     @include container-max-width('lg');
///   }
@mixin container-max-width($breakpoint) {
  @if not map-has-key($breakpoints, $breakpoint) {
    @error "断点 '#{$breakpoint}' 不存在。可用断点: #{map-keys($breakpoints)}";
  }
  
  $value: map-get($breakpoints, $breakpoint);
  $container-padding: 32px; // 默认容器内边距
  
  max-width: #{($value - $container-padding) / 16}rem;
  margin-left: auto;
  margin-right: auto;
}

/// 响应式值 mixin - 在不同断点应用不同的值
/// @param {String} $property - CSS 属性名
/// @param {Map} $values - 断点和值的映射
/// @example
///   .title {
///     @include responsive-property('font-size', (
///       'xs': 1.5rem,
///       'md': 2rem,
///       'lg': 2.5rem
///     ));
///   }
@mixin responsive-property($property, $values) {
  @each $breakpoint, $value in $values {
    @if $breakpoint == 'base' or $breakpoint == 'default' {
      #{$property}: #{$value};
    } @else {
      @include up($breakpoint) {
        #{$property}: #{$value};
      }
    }
  }
}



// ============================================================================
// TYPOGRAPHY MIXINS
// ============================================================================

// ============================================================================
// Typography 工具 Mixins - 与 CSS-in-JS API 完全一致
// ============================================================================

// Typography 预设数据
$typography-presets: (
  "body.large": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-md),
    "font-weight": var(--cdt-font-weights-default),
    "line-height": var(--cdt-font-line-heights-normal),
    "letter-spacing": var(--cdt-font-letter-spacings-body-large)
  ),
  "body.large-strong": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-md),
    "font-weight": var(--cdt-font-weights-strong),
    "line-height": var(--cdt-font-line-heights-normal),
    "letter-spacing": var(--cdt-font-letter-spacings-body-large)
  ),
  "body.medium": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-sm),
    "font-weight": var(--cdt-font-weights-medium),
    "line-height": var(--cdt-font-line-heights-snug),
    "letter-spacing": var(--cdt-font-letter-spacings-body-medium)
  ),
  "body.medium-strong": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-sm),
    "font-weight": var(--cdt-font-weights-heavy),
    "line-height": var(--cdt-font-line-heights-snug),
    "letter-spacing": var(--cdt-font-letter-spacings-body-medium)
  ),
  "body.small": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-xs),
    "font-weight": var(--cdt-font-weights-default),
    "line-height": var(--cdt-font-line-heights-tight),
    "letter-spacing": var(--cdt-font-letter-spacings-body-small)
  ),
  "body.small-strong": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-xs),
    "font-weight": var(--cdt-font-weights-strong),
    "line-height": var(--cdt-font-line-heights-tight),
    "letter-spacing": var(--cdt-font-letter-spacings-body-small-strong)
  ),
  "heading.display": (
    "font-family": var(--cdt-font-families-display),
    "font-size": var(--cdt-font-sizes-2xl),
    "font-weight": var(--cdt-font-weights-light),
    "line-height": var(--cdt-font-line-heights-extra-loose),
    "letter-spacing": var(--cdt-font-letter-spacings-display)
  ),
  "heading.large": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-xl),
    "font-weight": var(--cdt-font-weights-heavy),
    "line-height": var(--cdt-font-line-heights-loose),
    "letter-spacing": var(--cdt-font-letter-spacings-heading-large)
  ),
  "heading.medium": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-lg),
    "font-weight": var(--cdt-font-weights-heavy),
    "line-height": var(--cdt-font-line-heights-relaxed),
    "letter-spacing": var(--cdt-font-letter-spacings-heading-medium)
  ),
  "heading.small": (
    "font-family": var(--cdt-font-families-default),
    "font-size": var(--cdt-font-sizes-md),
    "font-weight": var(--cdt-font-weights-heavy),
    "line-height": var(--cdt-font-line-heights-normal),
    "letter-spacing": var(--cdt-font-letter-spacings-heading-small)
  )
);

/// 应用 typography 预设样式 - 与 CSS-in-JS typographyStyles() 一致
/// @param {String} $name - Typography preset 名称 (如 "body.large", "heading.medium")
/// @example scss - 使用示例
///   .card-title {
///     @include typography-styles("heading.large");
///   }
///   .body-text {
///     @include typography-styles("body.medium");
///   }
@mixin typography-styles($name) {
  @if not map.has-key($typography-presets, $name) {
    $available-presets: map.keys($typography-presets);
    @error "Typography preset '#{$name}' not found. Available presets: #{$available-presets}";
  }
  
  $preset: map.get($typography-presets, $name);
  
  font-family: map.get($preset, 'font-family');
  font-size: map.get($preset, 'font-size');
  font-weight: map.get($preset, 'font-weight');
  line-height: map.get($preset, 'line-height');
  letter-spacing: map.get($preset, 'letter-spacing');
}

/// 应用字体族样式
/// @param {String} $name - 字体族名称
/// @example scss - 使用示例
///   .heading {
///     @include font-family-style("display");
///   }
@mixin font-family-style($name) {
  font-family: font-family($name);
}

/// 应用字体重量样式
/// @param {String} $name - 字体重量名称
/// @example scss - 使用示例
///   .bold {
///     @include font-weight-style("strong");
///   }
@mixin font-weight-style($name) {
  font-weight: font-weight($name);
}

/// 应用字体大小样式
/// @param {String} $name - 字体大小名称
/// @example scss - 使用示例
///   .large {
///     @include font-size-style("lg");
///   }
@mixin font-size-style($name) {
  font-size: font-size($name);
}

/// 应用行高样式
/// @param {String} $name - 行高名称
/// @example scss - 使用示例
///   .relaxed {
///     @include line-height-style("relaxed");
///   }
@mixin line-height-style($name) {
  line-height: line-height($name);
}

/// 应用字符间距样式
/// @param {String} $name - 字符间距名称
/// @example scss - 使用示例
///   .spaced {
///     @include letter-spacing-style("body-large");
///   }
@mixin letter-spacing-style($name) {
  letter-spacing: letter-spacing($name);
}

/// 重置字体样式为默认值
/// @example scss - 使用示例
///   .reset {
///     @include reset-typography();
///   }
@mixin reset-typography() {
  font-family: font-family("default");
  font-size: font-size("md");
  font-weight: font-weight("default");
  line-height: line-height("normal");
  letter-spacing: letter-spacing("body-medium");
}

/// 创建响应式 typography，在不同断点使用不同预设
/// @param {Map} $breakpoint-presets - 断点和预设的映射
/// @example scss - 使用示例
///   .responsive-heading {
///     @include responsive-typography((
///       'mobile': 'heading.small',
///       'tablet': 'heading.medium',
///       'desktop': 'heading.large'
///     ));
///   }
@mixin responsive-typography($breakpoint-presets) {
  @each $breakpoint, $preset in $breakpoint-presets {
    @if $breakpoint == 'default' or $breakpoint == 'base' {
      @include typography-styles($preset);
    } @else {
      @include up($breakpoint) {
        @include typography-styles($preset);
      }
    }
  }
}

/// 应用文本省略号样式（单行）
/// @example scss - 使用示例
///   .truncate {
///     @include text-ellipsis();
///   }
@mixin text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/// 应用多行文本省略号样式
/// @param {Number} $lines - 显示的行数，默认 2
/// @example scss - 使用示例
///   .truncate-multiline {
///     @include text-ellipsis-multiline(3);
///   }
@mixin text-ellipsis-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/// 应用 CSS 变量的 typography 样式（用于动态主题）
/// @param {String} $name - Typography preset 名称
/// @param {String} $prefix - CSS 变量前缀，默认为 'typography'
/// @example scss - 使用示例
///   .dynamic-text {
///     @include typography-styles-var("heading.large", "theme");
///   }
@mixin typography-styles-var($name, $prefix: 'typography') {
  font-family: var(--#{$prefix}-#{$name}-font-family, font-family("default"));
  font-size: var(--#{$prefix}-#{$name}-font-size, font-size("md"));
  font-weight: var(--#{$prefix}-#{$name}-font-weight, font-weight("default"));
  line-height: var(--#{$prefix}-#{$name}-line-height, line-height("normal"));
  letter-spacing: var(--#{$prefix}-#{$name}-letter-spacing, letter-spacing("body-medium"));
}

// ============================================================================
// 文件结束
// ============================================================================