.bee-chip {
display: inline-flex !important;
align-items: center !important;
gap: var(--bee-space-2xs);
padding: 0.5em 1.25em !important;
border-radius: var(--bee-radius-pill) !important;
font-family: inherit;
font-size: var(--bee-text-sm);
font-weight: 600;
letter-spacing: var(--bee-tracking-widest);
line-height: 1;
text-transform: uppercase;
width: fit-content !important; backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); border: 1px solid var(--bee-gold-border);
box-shadow:
0 0 0 1px rgba(255, 219, 27, 0.08),
0 4px 24px var(--bee-gold-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
} .bee-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
} .bee-chip--gold {
background: var(--bee-gradient-glass-gold);
color: var(--bee-gold);
border-color: var(--bee-gold-border);
}
.bee-chip--gold::before {
background: var(--bee-gold);
box-shadow: 0 0 8px rgba(255, 219, 27, 0.8);
} .bee-chip--blue {
background: linear-gradient(
135deg,
rgba(127, 212, 255, 0.18),
rgba(93, 202, 165, 0.08)
);
color: var(--bee-blue);
border-color: rgba(127, 212, 255, 0.35);
box-shadow:
0 0 0 1px rgba(127, 212, 255, 0.08),
0 4px 24px rgba(127, 212, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.bee-chip--blue::before {
background: var(--bee-blue);
box-shadow: 0 0 8px rgba(127, 212, 255, 0.8);
}
.bee-chip--dark-blue{
color:var(--bee-dark-soft);
background: rgba(24, 95, 165, 0.06);
border-color: rgba(24, 95, 165, 0.18);
box-shadow:none !important;
} .bee-chip--ghost {
background: var(--bee-surface-glass);
color: rgba(255, 255, 255, 0.9);
border-color: var(--bee-surface-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bee-chip--ghost::before {
background: rgba(255, 255, 255, 0.9);
}