page {
  color: $mix-main-c;
  font-size: 28rpx;
}

// #region 去除webkit的默认样式
.mix-fix-ios-appearance {
  -webkit-appearance: none;
}
// #endregion

// #region icon图标外层套一个view，让其达到更好的垂直居中的效果
.mix-icon-wrap {
  display: flex;
  align-items: center;
}
.safe-area-inset-bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// #endregion

/* start--各种hover点击反馈相关的类名-start */
.mix-hover-class {
  opacity: 0.6;
}
/* end--各种hover点击反馈相关的类名--end */

// #region 文本行数限制
.mix-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mix-line-2 {
  -webkit-line-clamp: 2;
}

.mix-line-3 {
  -webkit-line-clamp: 3;
}

.mix-line-4 {
  -webkit-line-clamp: 4;
}

.mix-line-5 {
  -webkit-line-clamp: 5;
}

.mix-line-2,
.mix-line-3,
.mix-line-4,
.mix-line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}
// #endregion

// #region Retina 屏幕下的 1px 边框
.mix-b,
.mix-b-b,
.mix-b-l,
.mix-b-r,
.mix-b-t,
.mix-b-tb,
.mix-b-no {
  position: relative;
}

.mix-b-no {
  border: none !important;
}

.mix-b-b:after,
.mix-b-l:after,
.mix-b-r:after,
.mix-b-tb:after,
.mix-b-t:after,
.mix-b:after,
.mix-b-no:after {
  /* #ifndef APP-NVUE */
  content: ' ';
  /* #endif */
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  transform-origin: 0 0;
  // 多加0.1%，能解决有时候边框缺失的问题
  width: 199.8%;
  height: 199.7%;
  transform: scale(0.5, 0.5);
  border: 0 solid $mix-bc-base;
  z-index: 2;
}

.mix-b-t:after {
  border-top-width: 1px;
}

.mix-b-l:after {
  border-left-width: 1px;
}

.mix-b-r:after {
  border-right-width: 1px;
}

.mix-b-b:after {
  border-bottom-width: 1px;
}

.mix-b-tb:after {
  border-width: 1px 0;
}

.mix-b:after {
  border-width: 1px;
}

.mix-b-no:after {
  border: none !important;
}
// #endregion

// #region 阴影
.mix-shadow-box {
  box-shadow: 0px 0px 16rpx $mix-bc-base;
}
.mix-shadow {
  position: relative;
}
.mix-shadow::before {
  content: '';
  display: block;
  background: inherit;
  filter: blur(6rpx);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8rpx;
  left: 8rpx;
  z-index: 1;
  opacity: 0.38;
  transform-origin: 0 0;
  border-radius: inherit;
  transform: scale(1, 1);
}
// #endregion

// #region clearfix
.mix-clearfix:after,
.clearfix:after {
  /* #ifndef APP-NVUE */
  content: '';
  /* #endif */
  display: table;
  clear: both;
}
// #endregion