@import 'variable';
// 混入自定义函数带括号与带括号的区别： 带括号只会在用到的地方编译解析代码、不带括号会编译两次代码
// 注释区别： 单行注释(//)不会被编译到源码里 多行注释(/* */)会被编译到源码里
// 鼠标hover效果
@mixin hoverOpacity() {
  opacity: 1;
  transition: all 0.3s;
  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
@mixin hoverBackground() {
  transition: all 0.3s;
  &:hover {
    cursor: pointer;
    background: #eeeeee !important;
  }
}
@mixin hoverTranslateY($top: -5px) {
  transition: all 0.3s;
  transform: translateY(0);
  &:hover {
    cursor: pointer;
    transform: translateY($top);
  }
}
@mixin hoverEffect() {
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background: rgb(0 0 0 / 0.025) !important;
  }
}

// 超出行数变为...
@mixin clampN($index) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $index;
}

// 水平垂直定位居中
@mixin posCenterXY {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 水平定位居中
@mixin posCenterX {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
// 垂直定位居中
@mixin posCenterY {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
// 定位占满父容器
@mixin posFull {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
// 定位占满父容器X
@mixin posRow {
  position: absolute;
  left: 0;
  right: 0;
}
// 定位占满父容器Y
@mixin posCol {
  position: absolute;
  top: 0;
  bottom: 0;
}

// flex伸缩布局 水平方向 垂直居中
@mixin flexRow {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// flex伸缩布局 水平方向 垂直居中 换行
@mixin flexRowWrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
// flex伸缩布局 水平垂直居中
@mixin flexRowCenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
// flex伸缩布局 水平右对齐 垂直居中
@mixin flexRowEnd {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
// flex伸缩布局 space-around 并居中
@mixin flexRowSa {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
// flex伸缩布局 space-between 并居中
@mixin flexRowSb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
// flex伸缩布局 水平均分 垂直居中
@mixin flexRowSe {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

// flex伸缩布局 垂直方向
@mixin flexCol {
  display: flex;
  flex-direction: column;
}
// flex伸缩布局 水平垂直居中
@mixin flexColCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// flex伸缩布局 垂直 space-around 对齐
@mixin flexColSa {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
// flex伸缩布局 垂直两端对齐
@mixin flexColSb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
// flex伸缩布局 垂直均分
@mixin flexColSe {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

// grid网格布局 几行几列等比
@mixin gridRowCol($row: 1, $col: 1, $gap: 0) {
  display: grid;
  grid-template-rows: repeat($row, 1fr);
  grid-template-columns: repeat($col, 1fr);
  gap: $gap;
}

// grid网格布局 列自适应
@mixin gridAutoCol($min: 80px, $max: 1fr, $gap: 0) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($min, $max));
  grid-auto-rows: $min;
  gap: $gap;
}

// 设置输入框placeholder值样式
@mixin phStyle($color: #333, $fs: 16px) {
  input::-webkit-input-placeholder {
    //WebKit browsers
    color: $color;
    font-size: $fs;
  }
  input:-moz-placeholder {
    //Mozilla Firefox 4 to 18
    color: $color;
    font-size: $fs;
  }
  input::-moz-placeholder {
    //Mozilla Firefox 19+
    color: $color;
    font-size: $fs;
  }
  input:-ms-input-placeholder {
    //Internet Explorer 10+
    color: $color;
    font-size: $fs;
  }
}

// 设置滚动条样式 给需要设置滚动条的容器添加类名 scroller
@mixin scrollStyle($width: 8px, $height: 8px, $trackBg: #f5f5f5, $thumbBg: #c8c8c8) {
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
  }
  // 定义滚动条轨道
  &::-webkit-scrollbar-track {
    background-color: $trackBg;
    border-radius: 2em;
  }
  // 定义滑块
  &::-webkit-scrollbar-thumb {
    background-color: $thumbBg;
    border-radius: 2em;
  }
}

// 实现实心三角形
@mixin triangle($dir: Down, $width: 8px, $color: #fff) {
  // 方向 边框宽度 颜色
  width: 0;
  height: 0;
  border-style: solid;
  border-width: $width;
  @if ($dir == Up) {
    border-color: transparent transparent $color transparent;
  } @else if($dir == Down) {
    border-color: $color transparent transparent transparent;
  } @else if($dir == Left) {
    border-color: transparent $color transparent transparent;
  } @else if($dir == Right) {
    border-color: transparent transparent transparent $color;
  }
}