@import './layout';

/* 主按钮 */
@mixin primary-btn($width, $height, $fontSize: $font-l, $color: $color-white, $borderRadius: .08rem, $bgColor: $color-primary-btn, $bgActive: $color-blue) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $width;
  height: $height;
  font-size: $fontSize;
  color: $color;
  border-radius: $borderRadius;
  background-image: $bgColor;

  &:active {
    background: $bgActive;
  }
}

/* 次按钮 */
@mixin secondary-btn($width, $height, $fontSize: $font-l, $color: $color-black, $borderRadius: .08rem, $bgColor: $color-secondary-btn, $bgActive: $color-gray-3) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $width;
  height: $height;
  font-size: $fontSize;
  color: $color;
  border-radius: $borderRadius;
  background: $bgColor;

  &:active {
    background: $bgActive;
  }
}

/* 不可点击按钮 */
@mixin disabled-btn($width, $height, $fontSize: $font-l, $color: $color-white, $borderRadius: .08rem, $bgColor: $color-primary-btn, $bgActive: $color-primary-active) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $width;
  height: $height;
  font-size: $fontSize;
  color: $color;
  border-radius: $borderRadius;
  background-image: $bgColor;
  opacity: .4;
}

/* 线框按钮 */
@mixin border-btn($width, $height, $fontSize: $font-l, $color: $color-primary, $borderColor: $color-primary, $borderRadius: .08rem, $bgColor: transparent, $bgActive: $color-bg, $borderActive: $color-blue, $textActive: $color-blue) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $width;
  height: $height;
  font-size: $fontSize;
  color: $color;
  border-width: .02rem;
  border-style: solid;
  border-color: $borderColor;
  border-radius: $borderRadius;
  background: $bgColor;

  &:active {
    background: $bgActive;
    border-color: $borderActive;
    color: $textActive;
  }
}

/* 常规按钮背景 */
@mixin btn-default-bg {
  &::after {
    position: absolute;
    top: .08rem;
    right: 0;
    content: '';
    width: 1.52rem;
    height: .3rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/btn-bg-r.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
  }

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 1.26rem;
    height: .3rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/btn-bg-r.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}

/* 特长按钮背景 */
@mixin btn-large-bg {
  &::after {
    position: absolute;
    top: .08rem;
    right: 0;
    content: '';
    width: 1.86rem;
    height: .3rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/large-btn-bg-r.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
  }

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 1.86rem;
    height: .3rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/large-btn-bg-l.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}

/* 主理人特长按钮背景 */
@mixin btn-large-bg-owner {
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 1.8rem;
    height: .66rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/agent-btn-bg-r.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
  }

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 1.8rem;
    height: .66rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/agent-btn-bg-l.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
  }
}

/* 文字超长处理单行 */
@mixin single-line-ellipsis {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字超长处理多行 */
@mixin more-lines-ellipsis($height, $line: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: $height;
  -webkit-line-clamp: $line;
  overflow: hidden;
  word-break: break-all;
}

/* 0.5px边框--横向上边框(通过伪元素控制显示) */
@mixin halfTopBorder($color: $color-gray-3) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  content: '';
  height: 1px;
  background-color: $color;
  transform: scaleY(.5);
  transform-origin: 0 0;
}

/* 0.5px边框--横向下边框(通过伪元素控制显示) */
@mixin halfBottomBorder($color: $color-gray-3) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  height: 1px;
  background-color: $color;
  transform: scaleY(.5);
  transform-origin: 0 0;
}

/* 0.5px边框--纵向左边框(通过伪元素控制显示) */
@mixin halfLeftBorder($color: $color-gray-3) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 1px;
  background-color: $color;
  transform: scaleX(.5);
  transform-origin: 0 0;
}

/* 0.5px边框--纵向右边框(通过伪元素控制显示) */
@mixin halfRightBorder($color: $color-gray-3) {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  content: '';
  width: 1px;
  background-color: $color;
  transform: scaleX(.5);
  transform-origin: 0 0;
}

/* 0.5px边框--四边框(通过伪元素控制显示) */
@mixin halfBorder($color: $color-gray-3, $borderRadius) {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 200%;
  height: 200%;
  border-style: solid;
  border-width: 1px;
  border-color: $color;
  border-radius: $borderRadius;
  transform: scale(.5);
  transform-origin: 0 0;
  pointer-events: none;
}

/* 红点单个数字样式 */
@mixin red-dot-single-num($position: absolute, $top: 0, $right: 0) {
  position: $position;
  top: $top;
  right: $right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .22rem;
  height: .22rem;
  font-size: .16rem;
  color: $color-white;
  font-weight: 600;
  border-radius: .03rem;
  transform: rotate(45deg);
  background: $color-red;
}

/* 红点多个数字样式 */
@mixin red-dot-more-num($position: absolute, $top: 0, $left: 0) {
  position: $position;
  top: $top;
  left: $left;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .6rem;
  height: .28rem;
  font-size: .16rem;
  color: $color-white;
  font-weight: 600;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/new/user/union.png) no-repeat center;
  background-size: contain;
}

/* 红点提醒样式--不带数字 */
@mixin red-dot($position: absolute, $top: 0, $right: 0) {
  position: $position;
  top: $top;
  right: $right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .12rem;
  height: .12rem;
  border-radius: .03rem;
  background: $color-red;
  transform: rotate(45deg);
}