.tw-badge {
  position: relative;
  display: inline-block;
  --badge-size: 16px;
  --badge-mask: 2px;
  --badge-mask-offset: calc(var(--badge-size) / 2);
  --badge-border-color: rgba(255, 255, 255, 0.08);
  --badge-content-position: 0px;
}
.tw-badge.tw-badge-lg {
  --badge-size: 24px;
  --badge-mask: 3px;
}
.tw-badge.tw-badge-border-dark {
  --badge-border-color: rgba(0, 0, 0, 0.08);
}
.tw-badge > .tw-badge__children {
  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
}
[dir="rtl"] .tw-badge > .tw-badge__children {
  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
}
.tw-badge > .tw-badge__content {
  position: absolute;
  width: var(--badge-size);
  height: var(--badge-size);
  bottom: var(--badge-content-position);
  right: var(--badge-content-position);
  box-sizing: border-box;
  border-radius: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[dir="rtl"] .tw-badge > .tw-badge__content {
  left: var(--badge-content-position);
  right: auto;
  right: initial;
}
.tw-badge > .tw-badge__content * {
  max-height: 100%;
  max-width: 100%;
}
.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-light__children,
.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-dark__children,
.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-light__children,
.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-dark__children {
  -webkit-mask-image: none;
          mask-image: none;
}
.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-light__content,
.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-dark__content,
.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-light__content,
.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-dark__content {
  border-style: solid inset solid solid;
  border-width: 1px;
  border-color: var(--badge-border-color);
}