@charset "utf-8";

.badge-wrapper { position: relative; display: inline-flex; isolation: isolate; }

.badge-standalone { display: inline-flex; }

.badge-standalone .badge { position: static; top: unset; right: unset; }

.badge { position: absolute; z-index: 4; border-radius: var(--fds-ref-radius-full); white-space: nowrap; user-select: none; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 0.15s; }

.badge--2xs:not(.badge--dot) { }

.badge--sm:not(.badge--dot) { top: -6px; right: -8px; height: var(--fds-sem-dimension-xsmall); min-width: var(--fds-sem-dimension-xsmall); padding: var(--fds-ref-spacing-4xsmall) var(--fds-ref-spacing-2xsmall-nudge); }

.badge--md:not(.badge--dot) { top: -8px; right: -10px; height: var(--fds-sem-dimension-xsmall-nudge); min-width: var(--fds-sem-dimension-xsmall-nudge); padding: var(--fds-ref-spacing-4xsmall) var(--fds-ref-spacing-2xsmall); }

.badge--lg:not(.badge--dot) { top: -10px; right: -12px; height: var(--fds-sem-dimension-small); min-width: var(--fds-sem-dimension-small); padding: var(--fds-ref-spacing-4xsmall) var(--fds-ref-spacing-2xsmall); }

.badge--dot { padding: 0px; }

.badge--dot.badge--2xs { top: 0px; right: 0px; width: var(--fds-sem-dimension-4xsmall); height: var(--fds-sem-dimension-4xsmall); min-width: var(--fds-sem-dimension-4xsmall); }

.badge--dot.badge--xs { top: 0px; right: 0px; width: var(--fds-sem-dimension-3xsmall); height: var(--fds-sem-dimension-3xsmall); min-width: var(--fds-sem-dimension-3xsmall); }

.badge--dot.badge--sm { top: -8px; right: -8px; width: var(--fds-sem-dimension-xsmall); height: var(--fds-sem-dimension-xsmall); min-width: var(--fds-sem-dimension-xsmall); }

.badge--dot.badge--md { top: -10px; right: -10px; width: var(--fds-sem-dimension-xsmall-nudge); height: var(--fds-sem-dimension-xsmall-nudge); min-width: var(--fds-sem-dimension-xsmall-nudge); }

.badge--dot.badge--lg { top: -12px; right: -12px; width: var(--fds-sem-dimension-small); height: var(--fds-sem-dimension-small); min-width: var(--fds-sem-dimension-small); }

.badge--primary { background: rgba(var(--hero),var(--fds-ref-alpha-100)); color: rgba(var(--hero-sc),var(--fds-ref-alpha-90)); }

.badge--secondary { background: rgba(var(--oc-1),var(--fds-ref-alpha-100)); color: rgba(var(--oc-1-sc),var(--fds-ref-alpha-90)); }

.badge--tertiary { background: rgba(var(--oc-2),var(--fds-ref-alpha-100)); color: rgba(var(--oc-2-sc),var(--fds-ref-alpha-90)); }

.badge--informative { background: rgba(var(--info),var(--fds-ref-alpha-100)); color: rgba(var(--static-white),var(--fds-ref-alpha-90)); }

.badge--red { background: rgba(var(--error),var(--fds-ref-alpha-100)); color: rgba(var(--static-white),var(--fds-ref-alpha-90)); }

.badge--neutral { background: rgba(var(--neutral),var(--fds-ref-alpha-100)); color: rgba(var(--neutral-sc),var(--fds-ref-alpha-90)); }

.badge--transparent-dark { background: rgba(var(--static-black),var(--fds-ref-alpha-48)); color: rgba(var(--static-white),var(--fds-ref-alpha-80)); }

.badge--transparent-light { background: rgba(var(--static-white),var(--fds-ref-alpha-72)); color: rgba(var(--static-black),var(--fds-ref-alpha-90)); }