.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;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, transform .15s ease
}

.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: 0
}

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

.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))
}