// @import '@/assets/bundle.scss';

%flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
%flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
%flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
%flex-left {
  display: flex;
  align-items: center;
}
%flex-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
%flex-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

%flex-none {
  flex: none;
}

%flex-auto {
  flex: auto;
}

%bg-no-repeat-center {
  background-repeat: no-repeat;
  background-position: center center;
}

%bg-size-100 {
  background-size: 100%;
}

%pd20 {
  padding: 20rpx;
}
%pd30 {
  padding: 30rpx;
}
%pd3020 {
  padding: 30rpx 20rpx;
}
%pdtb20 {
  padding: 20rpx 0;
}
%pdtb {
  padding: 20rpx 0;
}

%pdlr {
  padding: 0 20rpx;
}

// @extend %bgwhite;
%bgwhite {
  background-color: white;
}

// @extend %colorwhite;
%colorwhite {
  color: white !important;
}

// 文字一行
%oneline {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
%h100bs {
  height: 100rpx;
  box-sizing: border-box;
}

// 渐变按钮
%btn-linearGradient {
  background: linear-gradient(to left, $maincolor, $maincolor2);
  font-size: 32rpx;
  @extend %colorwhite;
  height: 80rpx;
  width: 280rpx;
  border-radius: 140rpx;
  @extend %flex-center;
}

// 直降秒杀badge
%act-type-text {
  font-size: 16rpx;
  border-radius: 20rpx;
  color: $maincolor;
  border: 1rpx solid $maincolor;
  width: 40rpx;
  height: 20rpx;
  line-height: 0;
  @extend %flex-center;
  box-sizing: border-box;
}

// 全屏
%fullScreen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

// 小盒子pd20 底部描边
%boxpd20bb {
  @extend %pdtb20;
  border-bottom: 1rpx solid $border1;
  box-sizing: border-box;
  margin: 0 20rpx;
}

// 下拉刷新遮罩样式
%mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: black;
  opacity: 0;
  z-index: 999;
}

%btn-base {
  @extend %flex-center;
  flex: 1;
  height: 80rpx;
  background: linear-gradient(to bottom, #4eb331 0%,#67c23a 100%);
  @extend %colorwhite;
  border-radius: 10rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  border-bottom: 6rpx solid $maincolor;
}

%vendor-0-color {
  color: #47B34F;
}
%vendor-1-color {
  color: #FAD300;
}
%vendor-2-color {
  color: #008DE1;
}
%vendor-3-color {
  color: #008DE1;
}
%vendor-4-color {
  color: $text2;
}
%vendor-5-color {
  color: $text2;
}
%vendor-6-color {
  color: $text2;
}
%vendor-7-color {
  color: $text2;
}
%vendor-8-color {
  color: $text2;
}
%vendor-9-color {
  color: $maincolor;
}
%vendor-10-color {
  color: $maincolor;
}
%vendor-11-color {
  color: #0065fa;
}

@for $vendorID from 0 to 10 {
  %vendor-#{$vendorID}-icon {
    .icon-vendor {
      width: 40rpx;
      height: 40rpx;
      background-image: url(../../assets/images/icon-vendor.png);
      background-repeat: no-repeat;
      background-position: (-$vendorID * 40rpx) 0;
      background-size: cover;
    }
    .order-seq {
      @extend %vendor-#{$vendorID}-color;
      font-size: 32rpx;
      font-weight: 500;
      margin-left: 10rpx;
      @extend %text-shadow;
    }
  }
}

%text-shadow {
  text-shadow: 0 0 1rpx rgba(black, .2);
}

%ft24 {
  font-size: 24rpx;
}
%ft28 {
  font-size: 28rpx;
}

%ft32 {
  font-size: 32rpx;
}

%ft34 {
  font-size: 34rpx;
}
%ft36 {
  font-size: 36rpx;
}

%ft30 {
  font-size: 30rpx;
}

// %vendor-0-icon {
//   .icon-vendor {
//     @extend %icon-vendor;
//   }
//   .order-seq {

//   }
// }

%table-layout {
  @extend %flex-left;
  .left, .center, .right {
    flex: none;
    text-align: center;
  }
  .left {
    width: 46%;
  }
  .center {
    width: 30%;
  }
  .right {
    width: 24%;
  }
}

%borderbottom {
  border-bottom: 1rpx solid $border3;
}

%devider {
  border-top: 1rpx solid $warning;
  height: 6rpx;
  border-bottom: 1rpx dashed $warning;
  opacity: .5;
}

%mt20 {
  margin-top: 20rpx;
}
%mb20 {
  margin-bottom: 20rpx;
}
%mb200 {
  margin-bottom: 200rpx;
}

%icon-base {
  @extend %bg-no-repeat-center;
  @extend %bg-size-100;
}

%pd4020 {
  padding: 40rpx 20rpx;
}

%boxShadow {
  box-shadow: 0 0 4rpx rgba($border1, .4);
}

%btn-group-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 120rpx;
  @extend %bgwhite;
  @extend %flex-left;
  @extend %boxShadow;
  border-top: 1rpx solid $border2;
  width: 100%;
}
