/**
 * 全局样式
 */

/* 颜色变量 */

@import 'uview-next/theme.scss';
/*============================= 文字尺寸 =============================*/

$font-size-20: 20rpx;
$font-size-22: 22rpx;
$font-size-24: 24rpx;
$font-size-26: 26rpx;
$font-size-28: 28rpx;
$font-size-30: 30rpx;
$font-size-32: 32rpx;
$font-size-34: 34rpx;
$font-size-36: 36rpx;
$font-size-38: 38rpx;
$font-size-40: 40rpx;

image {
  width: 100%;
  height: 100%;
}

/*============================= 弹性盒子 =============================*/
@mixin displayFlex($align: center, $justify: center) {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: $align;
  justify-content: $justify;
}

@mixin alignItems($align: center) {
  @include displayFlex($align, center);

  &-start {
    @include displayFlex($align, flex-start);
  }

  &-center {
    @include displayFlex($align, center);
  }

  &-end {
    @include displayFlex($align, flex-end);
  }

  &-between {
    @include displayFlex($align, space-between);
  }

  &-around {
    @include displayFlex($align, space-around);
  }

  &-evenly {
    @include displayFlex($align, space-evenly);
  }
}

.flex {
  @include displayFlex;

  &-center {
    @include alignItems(center);
  }

  &-start {
    @include alignItems(flex-start);
  }

  &-end {
    @include alignItems(flex-end);
  }
}

[class*='flex-'],
[class^='flex'] {
  &.row {
    flex-direction: row;
  }

  &.row-reverse {
    flex-direction: row-reverse;
  }

  &.column {
    flex-direction: column;
  }

  &.column-reverse {
    flex-direction: column-reverse;
  }

  &.wrap {
    flex-wrap: wrap;
  }

  &.nowrap {
    flex-wrap: nowrap;
  }
}

// 生成flex1等占位
@for $i from 1 through 5 {
  .flex#{$i} {
    flex: #{$i};
  }
}

/*============================= 文字溢出 =============================*/

%text-ellipsis-lint {
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-ellipsis {
  --line: 1;
  @extend %text-ellipsis-lint;
  -webkit-line-clamp: var(--line);

  &-1 {
    @extend %text-ellipsis-lint;
    -webkit-line-clamp: 1;
  }

  &-2 {
    @extend %text-ellipsis-lint;
    -webkit-line-clamp: 2;
  }

  &-3 {
    @extend %text-ellipsis-lint;
    -webkit-line-clamp: 3;
  }
}
