@import "../../../styles/assets/constant.scss";
@import "../../../styles/assets/theme.scss";

/**
 * @atom Label
 * @section Label
 * @modifiers
 * info
 * cavity
 * success
 * alarm
 * warning
 * danger
 * error
 * failed
 * dark
 */
.label {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  // display: flex;
  // align-items: center;
  font-size: $font-size-12;
  font-weight: normal;
  padding: 0 5px;
  height: 18px;
  line-height: 16px;
  color: #fff;
  fill: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;

  &.closable {
    .closable-icon {
      vertical-align: 0.125em;
      width: 8px;
      height: 8px;
      fill: rgba(17, 18, 34, 0.3);
      margin-left: 5px;
    }
  }
  &.max-width {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.label-cavity {
  color: $basic-aid-color;
  fill: $basic-aid-color;
  border-color: $basic-aid-color;
  background-color: transparent;
}

.label-danger {
  background-color: $basic-aid-red-color;
}

@mixin labelStyle(
  $color,
  $borderColor: $color,
  $bgColor: $color,
  $subBg: $bgColor
) {
  background-color: $color;
  border-color: $color;

  &.light {
    background-color: transparent;
    color: $color;
    border-color: $color;

    .icon {
      fill: $color;
    }
  }

  &.weak {
    background-color: $bgColor;
    color: $color;
    border-color: $borderColor;

    &.light {
      background-color: $subBg;
      color: $color;
      border-color: $subBg;
    }
  }
}

.label-warning {
  @include labelStyle(#f78f00, #ffd170, #fff5e1, #fff5e1);
}
.label-info {
  @include labelStyle(#4c7ece, #c7dbff, #f3f7ff, #f2f7ff);
}
.label-error {
  @include labelStyle($dangerColor, #fab9b9, #fff5f5, #ffdddd);
}
.label-alarm {
  @include labelStyle($subBrownColor);
}
.label-dark {
  @include labelStyle($menuBgColor);
}
.label-success {
  @include labelStyle($successColor, #bdec9f, #e3fbd3, #e3fbd3);
}
.label-failed {
  @include labelStyle($primaryGray, #dadada, #f3f3f3, #f3f3f3);
}