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

@include b(tag) {
  background-color: $--tag-default-bg;
  display: inline-block;
  padding: $--tag-padding;
  height: $--tag-height;
  line-height: 20px;
  font-size: $--tag-text-font-size;
  color: $--tag-border-color;
  border-radius: $--tag-border-radius;
  box-sizing: border-box;
  // border: 1px solid $--tag-border-color;
  white-space: nowrap;
  position: relative;
  vertical-align: middle;

  @include e(close-icon) {
    @include close-btn(10px, 0, 5px, 5px, 9px);
    @include trans-peudo-class-color($--tag-closebtn-color, $--tag-closebtn-hover-color);
  }

  @include when(closable) {
    background: $--tag-closebtn-bg;
    border-color: $--tag-closebtn-border-color;
    padding: $--tag-padding-closeble;
  }

  // info 模式
  @include m(info) {
    background-color: $--tag-default-bg;
    border-color: $--tag-info-theme--color;
    color: $--tag-info-theme--color;

    @include when(hit) {
      border-color: $--tag-info-theme--color;
    }

    @include when(closable) {
      background: $--tag-default-bg;
      border-color: $--tag-info-theme--color;
    }

    .el-tag__close-icon {
      @include trans-peudo-class-color($--tag-info-theme--color, $--tag-info-theme--color);
    }
  }
  // 成功
  @include m(success) {
    background-color: $--tag-default-bg;
    border-color: $--tag-success-theme--color;
    color: $--tag-success-theme--color;

    @include when(hit) {
      border-color: $--tag-success-theme--color;
    }

    @include when(closable) {
      background: $--tag-default-bg;
      border-color: $--tag-success-theme--color;
    }

    .el-tag__close-icon {
      @include trans-peudo-class-color($--tag-success-theme--color, $--tag-success-theme--color);
    }
  }
  // 警告
  @include m(warning) {
    background-color: $--tag-default-bg;
    border-color: $--tag-warning-theme--color;
    color: $--tag-warning-theme--color;

    @include when(hit) {
      border-color: $--tag-warning-theme--color;
    }

    @include when(closable) {
      background: $--tag-default-bg;
      border-color: $--tag-warning-theme--color;
    }

    .el-tag__close-icon {
      @include trans-peudo-class-color($--tag-warning-theme--color, $--tag-warning-theme--color);
    }
  }
  // 危险
  @include m(danger) {
    background-color: $--tag-default-bg;
    border-color: $--tag-danger-theme--color;
    color: $--tag-danger-theme--color;

    @include when(hit) {
      border-color: $--tag-danger-theme--color;
    }

    @include when(closable) {
      background: $--tag-default-bg;
      border-color: $--tag-danger-theme--color;
    }

    .el-tag__close-icon {
      @include trans-peudo-class-color($--tag-danger-theme--color, $--tag-danger-theme--color);
    }
  }

  @include m(medium) {
    height: 28px;
    line-height: 28px;

    @include when(closable) {
      padding: $--tag-padding-closeble-medium;
    }

    .el-tag__close-icon {
      top: 10px;
    }
  }

  @include m(small) {
    height: 24px;
    padding: 0 8px;
    line-height: 24px;
    .el-tag__close-icon {
      top: 8px;
    }
  }

  @include m(mini) {
    height: $--tag-height;
    padding: 0 5px;
    line-height: 19px;

    .el-tag__close-icon {
      margin-left: -3px;
    }
  }
  &.is-closable {
    cursor: pointer;
    &:hover {
      border-color: $--tag-border-hover-color;
      background-color: $--tag-default-hover-bg;
      &.el-tag--success,
      &.el-tag--info,
      &.el-tag--warning,
      &.el-tag--danger {
        border-color: inherit;
      }
    }
  }
}