@layer components{.badge{border-radius:var(--radius-full);color:var(--color-gray-900);color-scheme:light;font-size:var(--text-16);line-height:1;padding:var(--spacing-8) var(--spacing-12);position:absolute;white-space:nowrap}:has(>.badge){position:relative}.badge.pos-left{left:calc(var(--spacing-32)*-1)}.badge.pos-right{right:calc(var(--spacing-32)*-1)}.badge.pos-bottom{bottom:var(--spacing-8)}.badge.pos-bottom.pos-right{bottom:var(--spacing-24)}.badge.pos-middle{bottom:var(--spacing-56)}.badge.pos-middle.pos-right{bottom:calc(var(--spacing-56) + var(--spacing-16))}.badge.pos-top{bottom:var(--spacing-80)}.badge.pos-top.pos-right{bottom:calc(var(--spacing-80) + var(--spacing-16))}.badge.variant-blue{background-color:var(--color-blue-300)}.badge.variant-lightblue{background-color:var(--color-blue-100)}.badge.variant-green{background-color:var(--color-green-400)}.badge.variant-red{background-color:var(--color-red-300)}.badge.variant-pink{background-color:var(--color-pink-300)}.badge.variant-yellow{background-color:var(--color-yellow-300)}}