.badge {
  font-size: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 0.33em;
  padding: 0.33em 0.66em;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-weight: 500;
  line-height: 1.3333em;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.5em;
  overflow: hidden;
  color: #52525B;
  background: #FAFAFA;
  box-shadow: inset 0px 0px 0px 1px rgba(113, 113, 122, 0.16);
}
.badge-bg-bright {
  background: #F3F4F5;
  box-shadow: none;
}
.badge-bg-strong {
  background: #3F3F46;
  box-shadow: none;
}
.badge-no-bg, .badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #E4E4E7;
}
.badge-dark-mode {
  color: #A1A1AA;
  background: rgba(161, 161, 170, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(161, 161, 170, 0.2);
}

.badge-gray {
  color: #525252;
  background: #FAFAFB;
  box-shadow: inset 0px 0px 0px 1px rgba(115, 115, 115, 0.16);
}
.badge-gray.badge-bg-bright {
  background: #F5F5F7;
}
.badge-gray.badge-bg-strong {
  background: #404040;
}
.badge-gray.badge-no-bg, .badge-gray.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #E5E5E5;
}
.badge-gray.badge-dark-mode {
  color: #A3A3A3;
  background: rgba(163, 163, 163, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(163, 163, 163, 0.2);
}

.badge-cool-gray {
  color: #4B5563;
  background: #F9FAFB;
  box-shadow: inset 0px 0px 0px 1px rgba(107, 114, 128, 0.16);
}
.badge-cool-gray.badge-bg-bright {
  background: #EFF1F5;
}
.badge-cool-gray.badge-bg-strong {
  background: #374151;
}
.badge-cool-gray.badge-no-bg, .badge-cool-gray.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #E5E7EB;
}
.badge-cool-gray.badge-dark-mode {
  color: #9CA3AF;
  background: rgba(156, 163, 175, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(156, 163, 175, 0.2);
}

.badge-blue-gray {
  color: #475569;
  background: #F8FAFC;
  box-shadow: inset 0px 0px 0px 1px rgba(100, 116, 139, 0.16);
}
.badge-blue-gray.badge-bg-bright {
  background: #F5F7FA;
}
.badge-blue-gray.badge-bg-strong {
  background: #334155;
}
.badge-blue-gray.badge-no-bg, .badge-blue-gray.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #E2E8F0;
}
.badge-blue-gray.badge-dark-mode {
  color: #94A3B8;
  background: rgba(148, 163, 184, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(148, 163, 184, 0.2);
}

.badge-red {
  color: #B91C1C;
  background: #FFF5F3;
  box-shadow: inset 0px 0px 0px 1px rgba(227, 65, 64, 0.2);
}
.badge-red.badge-bg-bright {
  background: #FEE2E2;
}
.badge-red.badge-bg-strong {
  background: #DF2A2A;
}
.badge-red.badge-no-bg, .badge-red.badge-bg-white {
  color: #DF2A2A;
  box-shadow: inset 0px 0px 0px 1px #FCA5A5;
}
.badge-red.badge-dark-mode {
  color: #F87171;
  background: rgba(248, 113, 113, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(248, 113, 113, 0.2);
}

.badge-rose {
  color: #CC1061;
  background: #FFF1F2;
  box-shadow: inset 0px 0px 0px 1px rgba(204, 16, 97, 0.1);
}
.badge-rose.badge-bg-bright {
  background: #FFE4E6;
}
.badge-rose.badge-bg-strong {
  background: #CC1061;
}
.badge-rose.badge-no-bg, .badge-rose.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #FDA4AF;
}
.badge-rose.badge-dark-mode {
  color: #FB7185;
  background: rgba(251, 113, 133, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(251, 113, 133, 0.2);
}

.badge-pink {
  color: #C61A77;
  background: #FDF2F8;
  box-shadow: inset 0px 0px 0px 1px rgba(198, 26, 119, 0.12);
}
.badge-pink.badge-bg-bright {
  background: #FCE7F3;
}
.badge-pink.badge-bg-strong {
  background: #C61A77;
}
.badge-pink.badge-no-bg, .badge-pink.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #F9A8D4;
}
.badge-pink.badge-dark-mode {
  color: #F472B6;
  background: rgba(244, 114, 182, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(244, 114, 182, 0.2);
}

.badge-flamingo {
  color: #C01391;
  background: #FDF2FA;
  box-shadow: inset 0px 0px 0px 1px rgba(192, 19, 145, 0.12);
}
.badge-flamingo.badge-bg-bright {
  background: #FCE7F8;
}
.badge-flamingo.badge-bg-strong {
  background: #C01391;
}
.badge-flamingo.badge-no-bg, .badge-flamingo.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #FAA7E7;
}
.badge-flamingo.badge-dark-mode {
  color: #F877DE;
  background: rgba(248, 119, 222, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(240, 86, 204, 0.3);
}

.badge-fuchsia {
  color: #A21CAF;
  background: #FDF4FF;
  box-shadow: inset 0px 0px 0px 1px rgba(162, 28, 175, 0.16);
}
.badge-fuchsia.badge-bg-bright {
  background: #FAE8FF;
}
.badge-fuchsia.badge-bg-strong {
  background: #A21CAF;
}
.badge-fuchsia.badge-no-bg, .badge-fuchsia.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #F0ABFC;
}
.badge-fuchsia.badge-dark-mode {
  color: #E879F9;
  background: rgba(232, 121, 249, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(232, 121, 249, 0.2);
}

.badge-purple {
  color: #7E22CE;
  background: #FAF5FF;
  box-shadow: inset 0px 0px 0px 1px rgba(126, 34, 206, 0.16);
}
.badge-purple.badge-bg-bright {
  background: #F3E8FF;
}
.badge-purple.badge-bg-strong {
  background: #7E22CE;
}
.badge-purple.badge-no-bg, .badge-purple.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #D8B4FE;
}
.badge-purple.badge-dark-mode {
  color: #C084FC;
  background: rgba(192, 132, 252, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(192, 132, 252, 0.3);
}

.badge-violet {
  color: #6D28D9;
  background: #F5F3FF;
  box-shadow: inset 0px 0px 0px 1px rgba(109, 40, 217, 0.16);
}
.badge-violet.badge-bg-bright {
  background: #EDE9FE;
}
.badge-violet.badge-bg-strong {
  background: #6D28D9;
}
.badge-violet.badge-no-bg, .badge-violet.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #C4B5FD;
}
.badge-violet.badge-dark-mode {
  color: #A78BFA;
  background: rgba(167, 139, 250, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(167, 139, 250, 0.3);
}

.badge-indigo {
  color: #4338CA;
  background: #EEF2FF;
  box-shadow: inset 0px 0px 0px 1px rgba(67, 56, 202, 0.16);
}
.badge-indigo.badge-bg-bright {
  background: #E0E7FF;
}
.badge-indigo.badge-bg-strong {
  background: #4338CA;
}
.badge-indigo.badge-no-bg, .badge-indigo.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #9DB0FE;
}
.badge-indigo.badge-dark-mode {
  color: #818CF8;
  background: rgba(129, 140, 248, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(129, 140, 248, 0.3);
}

.badge-blue {
  color: #1D4ED8;
  background: #EFF6FF;
  box-shadow: inset 0px 0px 0px 1px rgba(29, 78, 216, 0.16);
}
.badge-blue.badge-bg-bright {
  background: #D9EBFF;
}
.badge-blue.badge-bg-strong {
  background: #1D4ED8;
}
.badge-blue.badge-no-bg, .badge-blue.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #93C5FD;
}
.badge-blue.badge-dark-mode {
  color: #60A5FA;
  background: rgba(96, 165, 250, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(96, 165, 250, 0.3);
}

.badge-sky {
  color: #0369A1;
  background: #EBFAFF;
  box-shadow: inset 0px 0px 0px 1px rgba(3, 105, 161, 0.16);
}
.badge-sky.badge-bg-bright {
  background: #D9F6FF;
}
.badge-sky.badge-bg-strong {
  background: #0284C7;
}
.badge-sky.badge-no-bg, .badge-sky.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #7DD3FC;
}
.badge-sky.badge-dark-mode {
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(56, 189, 248, 0.2);
}

.badge-cyan {
  color: #0E7490;
  background: #ECFEFF;
  box-shadow: inset 0px 0px 0px 1px rgba(14, 116, 144, 0.16);
}
.badge-cyan.badge-bg-bright {
  background: #CFFAFE;
}
.badge-cyan.badge-bg-strong {
  background: #0E7490;
}
.badge-cyan.badge-no-bg, .badge-cyan.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #67E8F9;
}
.badge-cyan.badge-dark-mode {
  color: #22D3EE;
  background: rgba(34, 211, 238, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(34, 211, 238, 0.2);
}

.badge-teal {
  color: #0F766E;
  background: #F0FDFA;
  box-shadow: inset 0px 0px 0px 1px rgba(15, 118, 110, 0.16);
}
.badge-teal.badge-bg-bright {
  background: #CCFBF1;
}
.badge-teal.badge-bg-strong {
  background: #0F766E;
}
.badge-teal.badge-no-bg, .badge-teal.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #5EEAD4;
}
.badge-teal.badge-dark-mode {
  color: #07D2BC;
  background: rgba(7, 210, 188, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(7, 210, 188, 0.2);
}

.badge-emerald {
  color: #047857;
  background: #F0FEF9;
  box-shadow: inset 0px 0px 0px 1px rgba(4, 120, 87, 0.2);
}
.badge-emerald.badge-bg-bright {
  background: #D1FAE5;
}
.badge-emerald.badge-bg-strong {
  background: #047857;
}
.badge-emerald.badge-no-bg, .badge-emerald.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #6EE7B7;
}
.badge-emerald.badge-dark-mode {
  color: #34D399;
  background: rgba(52, 211, 153, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(52, 211, 153, 0.2);
}

.badge-green {
  color: #15803D;
  background: #F0FDF4;
  box-shadow: inset 0px 0px 0px 1px rgba(22, 163, 74, 0.2);
}
.badge-green.badge-bg-bright {
  background: #DCFCE7;
}
.badge-green.badge-bg-strong {
  background: #15803D;
}
.badge-green.badge-no-bg, .badge-green.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #86EFAC;
}
.badge-green.badge-dark-mode {
  color: #4ADE80;
  background: rgba(34, 197, 94, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(34, 197, 94, 0.2);
}

.badge-lime {
  color: #4D7C0F;
  background: #F7FEE7;
  box-shadow: inset 0px 0px 0px 1px rgba(106, 168, 0, 0.16);
}
.badge-lime.badge-bg-bright {
  background: #ECFCCB;
}
.badge-lime.badge-bg-strong {
  background: #4D7C0F;
}
.badge-lime.badge-no-bg, .badge-lime.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #BEF264;
}
.badge-lime.badge-dark-mode {
  color: #9BE320;
  background: rgba(155, 227, 32, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(155, 227, 32, 0.2);
}

.badge-yellow {
  color: #8D4D06;
  background: #FEFDE8;
  box-shadow: inset 0px 0px 0px 1px rgba(216, 152, 0, 0.2);
}
.badge-yellow.badge-bg-bright {
  background: #FEF9C3;
}
.badge-yellow.badge-bg-strong {
  background: #8D4D06;
}
.badge-yellow.badge-no-bg, .badge-yellow.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #FDE047;
}
.badge-yellow.badge-dark-mode {
  color: #FBCE04;
  background: rgba(251, 206, 4, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(216, 152, 0, 0.2);
}

.badge-amber {
  color: #AF5109;
  background: #FFFAE7;
  box-shadow: inset 0px 0px 0px 1px rgba(175, 81, 9, 0.16);
}
.badge-amber.badge-bg-bright {
  background: #FEEFB8;
}
.badge-amber.badge-bg-strong {
  background: #AF5109;
}
.badge-amber.badge-no-bg, .badge-amber.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #FCCD4D;
}
.badge-amber.badge-dark-mode {
  color: #FFBF1F;
  background: rgba(255, 191, 31, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(255, 179, 0, 0.2);
}

.badge-orange {
  color: #C2410C;
  background: #FFF6ED;
  box-shadow: inset 0px 0px 0px 1px rgba(194, 65, 12, 0.16);
}
.badge-orange.badge-bg-bright {
  background: #FFEDD5;
}
.badge-orange.badge-bg-strong {
  background: #C2410C;
}
.badge-orange.badge-no-bg, .badge-orange.badge-bg-white {
  box-shadow: inset 0px 0px 0px 1px #FDBA74;
}
.badge-orange.badge-dark-mode {
  color: #FB923C;
  background: rgba(251, 146, 60, 0.1);
  box-shadow: inset 0px 0px 0px 1px rgba(251, 146, 60, 0.2);
}

.badge.badge-no-bg {
  background: transparent;
}

.badge.badge-bg-white {
  background: #FFF;
}

.badge.badge-bg-strong {
  color: #FFF;
}

.badge.badge-no-border,
.badge.badge-bg-bright {
  box-shadow: none;
}

.badge.badge-border-neutral {
  box-shadow: inset 0px 0px 0px 1px #E4E4E7;
}

.badge.badge-premium {
  color: #FFBF1F;
  background: #18181B;
  box-shadow: inset 0px 0px 0px 1px #FAA700;
}

.badge ion-icon:first-child {
  font-size: 1.33em;
  width: 1em;
  height: 1em;
  margin-left: -0.25em;
}

.badge.badge-s {
  font-size: 11px;
  gap: 0;
  padding: 0.182em 0.545em;
}
.badge.badge-s ion-icon {
  display: none;
}

.badge.badge-l {
  font-size: 14px;
  gap: 0.357em;
  padding: 0.357em 0.714em;
  line-height: 1.286em;
  letter-spacing: -0.01em;
}
.badge.badge-l ion-icon:first-child {
  font-size: 18px;
  margin-left: -0.278em;
  width: 1em;
  height: 1em;
}

.badge.badge-pill {
  border-radius: 9999px;
}

.badge[data-style] {
  opacity: 0;
}