// 完全容器居中
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 文字出省略号
@mixin utils-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// flex样式复用
@mixin flex(
  $direction: row,
  $horizontal: initial,
  $vertical: initial,
  $wrap: nowrap
) {
  display: flex;
  @if $direction != row {
    flex-flow: $direction $wrap;
  }
  @if $wrap != nowrap {
    flex-wrap: $wrap;
  }
  @if $vertical != initial {
    align-items: $vertical;
  }
  @if $horizontal != initial {
    justify-content: $horizontal;
  }
}

// mask样式复用
@mixin mask($bg-color) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  background: $bg-color;
}
