.yc-badge {
  position: relative;
  display: inline-block;
  line-height: 1;
  .yc-badge-dot,
  .yc-badge-text,
  .yc-badge-number,
  .yc-badge-custom-dot {
    z-index: 2;
    position: absolute;
    top: 2px;
    right: 2px;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
    overflow: hidden;
    background-color: rgb(var(--danger-6));
    border-radius: 20px;
    box-shadow: 0 0 0 2px var(--color-bg-1);
    text-align: center;
    &.yc-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: var(--border-radius-circle);
    }
    &.yc-badge-custom-dot {
      background-color: var(--color-bg-1);
      box-shadow: none;
    }
    &.yc-badge-text,
    &.yc-badge-number {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      color: var(--color-white);
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
    }
  }

  .yc-badge-stauts-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    .yc-badge-stauts-dot {
      width: 6px;
      height: 6px;
      border-radius: var(--border-radius-circle);
    }
    .yc-badge-status-text {
      color: var(--color-text-1);
      font-size: 12px;
      line-height: 1.5715;
    }
  }
}
// no-children
.yc-badge-no-children {
  .yc-badge-dot,
  .yc-badge-text,
  .yc-badge-number,
  .yc-badge-custom-dot {
    position: relative;
    transform: none;
    left: unset;
    right: unset;
  }
}

// status
@status: {
  normal: rgb(var(--gray-4));
  success: rgb(var(--success-6));
  danger: rgb(var(--danger-6));
  processing: rgb(var(--primary-6));
  warning: rgb(var(--warning-6));
};
each(@status,{
  .yc-badge-status-@{key}{
    background-color: @value;
  }
});
// colors
@colors: red, orangered, orange, gold, lime, green, cyan, blue, arcoblue, purple,
  pinkpurple, magenta, gray;
each(@colors, {
    .yc-badge-color-@{value} {
      background-color: rgb(var(~'--@{value}-6'));
    }
  });
