@import "mixins/mixins";
@import "common/var";

@mixin genTheme(
  $backgroundColorWeight,
  $borderColorWeight,
  $fontColorWeight,
  $hoverColorWeight
) {
  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
  border-bottom: 32px solid
    mix($--tag-primary-color, $--color-white, $backgroundColorWeight);

  &.el-corner--info {
    border-bottom: 32px solid
      mix($--tag-info-color, $--color-white, $backgroundColorWeight);

    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
  }

  &.el-corner--success {
    border-bottom: 32px solid
      mix($--tag-success-color, $--color-white, $backgroundColorWeight);
    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
  }

  &.el-corner--warning {
    border-bottom: 32px solid
      mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
  }

  &.el-corner--danger {
    border-bottom: 32px solid
      mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
  }
}
@include b(corner) {
  position: relative;
  min-height: 70px;
  @include e(label) {
    @include genTheme(20%, 0%, 100%, 100%);
    display: inline-block;
    height: 32px;
    line-height: 30px;
    font-size: $--tag-font-size;
    box-sizing: border-box;
    white-space: nowrap;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    background: transparent;
    border-top: none;
    padding: 0;
    line-height: 32px;
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
    right: -26px;
    width: 100px;
    text-align: center;
  }
  @include m(medium) {
    height: 28px;
    line-height: 28px;
    border-right-width: 28px; /* 右边框宽度 */
    border-bottom-width: 28px; /* 下边框宽度 */
    border-left-width: 28px; /* 左边框宽度 */
    top: 6px;
    right: -23px;
    width: 85px;
  }
  @include m(small) {
    height: 24px;
    line-height: 24px;
    border-right-width: 24px; /* 右边框宽度 */
    border-bottom-width: 24px; /* 下边框宽度 */
    border-left-width: 24px; /* 左边框宽度 */
    top: 6px;
    right: -20px;
    width: 75px;
  }
  @include m(mini) {
    height: 20px;
    line-height: 20px;
    border-right-width: 20px; /* 右边框宽度 */
    border-bottom-width: 20px; /* 下边框宽度 */
    border-left-width: 20px; /* 左边框宽度 */
    top: 6px;
    right: -17px;
    width: 65px;
  }
  @include m(dark) {
    @include genTheme(100%, 100%, 0, 80%);
  }
}
