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

// 给页面滚动条设置样式
@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

// 相对定位（父元素）
@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

// 快速设置 “指定宽度 + 居中”
@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

// 快速弄个三角形出来
@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }

  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}

// 绝对定位居中（支持水平/垂直/全居中）
@mixin absoluteCenter($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%);
  }
}

// 内容在容器中完全居中（水平+垂直居中，不换行）
@mixin flex-center() {
  display: flex;
  justify-content: center; // 主轴居中
  align-items: center;     // 交叉轴居中
  flex-wrap: nowrap;       // 不换行
}

// 内容左对齐，垂直居中（比如列表项、导航栏）
@mixin flex-start-center() {
  display: flex;
  justify-content: flex-start; // 主轴左对齐
  align-items: center;         // 交叉轴居中
  flex-wrap: nowrap;
}

// 内容右对齐，垂直居中（比如顶部导航的用户菜单）
@mixin flex-end-center() {
  display: flex;
  justify-content: flex-end; // 主轴右对齐
  align-items: center;       // 交叉轴居中
  flex-wrap: nowrap;
}

// 两端对齐（左右靠边，中间留白），垂直居中（比如卡片标题和操作按钮）
@mixin flex-between-center() {
  display: flex;
  justify-content: space-between; // 主轴两端对齐
  align-items: center;            // 交叉轴居中
  flex-wrap: nowrap;
}

// 水平居中，垂直靠上（比如多行文字顶部居中）
@mixin flex-center-start() {
  display: flex;
  justify-content: center;   // 主轴居中
  align-items: flex-start;   // 交叉轴居上
  flex-wrap: nowrap;
}

// 内容平均分布，垂直居中，超出换行（比如标签列表、图片网格）
@mixin flex-around-center-wrap() {
  display: flex;
  justify-content: space-around; // 主轴平均分布（两侧留白相等）
  align-items: center;           // 交叉轴居中
  flex-wrap: wrap;               // 换行
}

// 左对齐，子元素拉伸占满高度，超出换行（比如表单项目）
@mixin flex-start-stretch-wrap() {
  display: flex;
  justify-content: flex-start; // 主轴左对齐
  align-items: stretch;        // 交叉轴拉伸（子元素高度相等）
  flex-wrap: wrap;             // 换行
}

// 通用 flex 混入：可自定义主轴、交叉轴、换行方式
@mixin flex(
  $justify: center,    // 主轴默认左对齐
  $align: center,         // 交叉轴默认拉伸
  $wrap: nowrap            // 默认不换行
) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 文字省略：单行或多行
@mixin textEllipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; // 单行不换行
  
  @if $line > 1 { // 多行省略（需浏览器支持）
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: $line; // 显示行数
    -webkit-box-orient: vertical;
  }
}

// -------------------------- 基础颜色变量 --------------------------
// 深蓝色（常用于主色调、标题等）
$blue: #324157;
// 浅蓝色（常用于次要强调、边框等）
$light-blue: #3A71A8;
// 红色（常用于错误提示、删除按钮等）
$red: #C03639;
// 粉红色（常用于特殊标记、提醒等）
$pink: #E65D6E;
// 绿色（常用于成功提示、确认按钮等）
$green: #30B08F;
// 蒂芙尼蓝（常用于特殊模块、高亮等）
$tiffany: #4AB7BD;
// 黄色（常用于警告提示、重要标记等）
$yellow: #FEC171;
// 潘通绿（和上面的绿色类似，可能用于特定场景的区分）
$panGreen: #30B08F;


// -------------------------- 侧边栏专用变量 --------------------------
// 侧边栏菜单文字默认颜色
$menuText: #bfcbd9;
// 侧边栏菜单选中时的文字颜色
$menuActiveText: #409EFF;
// 侧边栏子菜单选中时的文字颜色
$subMenuActiveText: #f4f4f5;

// 侧边栏菜单背景色
$menuBg: #304156;
// 侧边栏菜单项 hover（鼠标经过）时的背景色
$menuHover: #263445;

// 侧边栏子菜单背景色
$subMenuBg: #1f2d3d;
// 侧边栏子菜单项 hover（鼠标经过）时的背景色
$subMenuHover: #001528;

// 侧边栏宽度（用于布局计算，比如内容区宽度 = 100% - 侧边栏宽度）
$sideBarWidth: 210px;


// -------------------------- 供 JS 访问的变量 --------------------------
// 作用：让 JS 能读取 SCSS 中的变量（比如在 Vue 组件的 JS 部分动态计算布局时使用）
:root {
  --menuText: #{$menuText};           // 导出菜单文字颜色
  --menuActiveText: #{$menuActiveText}; // 导出菜单选中文字颜色
  --subMenuActiveText: #{$subMenuActiveText}; // 导出子菜单选中文字颜色
  --menuBg: #{$menuBg};               // 导出菜单背景色
  --menuHover: #{$menuHover};         // 导出菜单 hover 背景色
  --subMenuBg: #{$subMenuBg};         // 导出子菜单背景色
  --subMenuHover: #{$subMenuHover};   // 导出子菜单 hover 背景色
  --sideBarWidth: #{$sideBarWidth};   // 导出侧边栏宽度
}