@use './variables.scss' as *;

// // 水平垂直居中
// @mixin flex-center {
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

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

// // 多行省略
// @mixin line-ellipsis($line: 2) {
//   display: -webkit-box;
//   -webkit-line-clamp: $line;
//   -webkit-box-orient: vertical;
//   overflow: hidden;
// }

// // 适配移动端1px边框
// @mixin border-1px($color:#eee) {
//   position: relative;
//   &::after {
//     content: '';
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     width: 100%;
//     height: 1px;
//     background: $color;
//     transform: scaleY(0.5);
//   }
// }

// 全平台响应式 Mixin（手机+平板+PC）
@mixin m1 {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin gt768 {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@mixin m768-1023 {
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    @content;
  }
}

@mixin m1024-1439 {
  @media screen and (min-width: 1024px) and (max-width: 1439px) {
    @content;
  }
}

@mixin lt1024 {
  @media screen and (max-width: 1025px) {
    @content;
  }
}

@mixin gt1024 {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

@mixin gt1440 {
  @media screen and (min-width: 1440px) {
    @content;
  }
}

@mixin auto-space($prop) {
  // 默认手机
  #{$prop}: $space-xs;

  // 平板 768-1023
  @include m768-1023 {
    #{$prop}: $space-sm;
  }

  // PC 1024-1439
  @include m1024-1439 {
    #{$prop}: $space-md;
  }

  // 大屏 1440+
  @include gt1440 {
    #{$prop}: $space-lg;
  }
}