.pso-badge {
    --c: var(--c-contrast-slight);
    --bg: color-mix(in srgb, currentColor 15%, transparent);

    display: flex;
    align-items: center;
    padding-inline: var(--G1);
    font-size: var(--F-XS);
    font-weight: 500;
    color: var(--c) !important;
    background-color: var(--bg);
    border-radius: calc(var(--R-S) / 2);

    &:empty {
        display: none;
    }
}

.pso-badge--float {
    position: absolute;
    z-index: 5;
    top: calc(var(--G2) * -1);
    right: calc(var(--G1) * -1);
    height: 16px;
    padding-inline: 4px;
    font-size: 10px;
    font-weight: 700;
}

.pso-badge--primary {
    --c: #fff;
    --bg: var(--c-primary);
}