.zhny-status-tag {
  border-radius: 4px;
  &-box {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 22px;
    &.zhny-status-tag-status1 {
      color: #333333;
      background: #fafafa;
      border-color: #afafaf;
      .skin-dark & {
        @dark-color: #afafaf;
        color: #ffffff;
        background: fade(@dark-color, 10%);
        border-color: @dark-color;
      }
    }
    &.zhny-status-tag-status2 {
      color: #52c41a;
      background: #e7ffdb;
      border-color: #52c41a;
      .skin-dark & {
        @dark-color: #52c41a;
        color: @dark-color;
        background: fade(@dark-color, 10%);
        border-color: @dark-color;
      }
    }
    &.zhny-status-tag-status3 {
      color: #2e97fa;
      background: #dfefff;
      border-color: #2e97fa;
      .skin-dark & {
        @dark-color: #2e97fa;
        color: @dark-color;
        background: fade(@dark-color, 10%);
        border-color: @dark-color;
      }
    }
    &.zhny-status-tag-status4 {
      color: #e8b33a;
      background: #fff4de;
      border-color: #e8b33a;
      .skin-dark & {
        @dark-color: #e8b33a;
        color: @dark-color;
        background: fade(@dark-color, 10%);
        border-color: @dark-color;
      }
    }
    &.zhny-status-tag-status5 {
      color: #e87040;
      background: #ffebdf;
      border-color: #e87040;
      .skin-dark & {
        @dark-color: #e87040;
        color: @dark-color;
        background: fade(@dark-color, 10%);
        border-color: @dark-color;
      }
    }
    &.zhny-status-tag-status6 {
      color: #e84848;
      background: #ffe0e2;
      border-color: #e84848;
      .skin-dark & {
        @dark-color: #e84848;
        color: @dark-color;
        background: fade(@dark-color, 10%);
        border-color: @dark-color;
      }
    }
  }
  &-dot {
    position: relative;
    font-size: 14px;
    height: 19px;
    line-height: 19px;
    color: #333333;
    border: none;
    padding-left: 14px;
    padding-right: 0;
    background: none !important;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .skin-dark & {
      color: #fff;
    }
    &.zhny-status-tag-status1::before {
      background-color: #cecece;
    }
    &.zhny-status-tag-status2::before {
      background-color: #52c41a;
    }
    &.zhny-status-tag-status3::before {
      background-color: #2e97fa;
    }
    &.zhny-status-tag-status4::before {
      background-color: #e8b33a;
    }
    &.zhny-status-tag-status5::before {
      background-color: #e87040;
    }
    &.zhny-status-tag-status6::before {
      background-color: #e84848;
    }
  }
}