.label-badge {
    padding: 0;
    border: 2px solid var(--c--contextuals--border--semantic--contextual--primary);

    & > .label-badge__label {
        padding: var(--c--globals--spacings--2xs) var(--c--globals--spacings--xs);
        font-size: var(--c--globals--font--sizes--s);
        display: inline-block;
        text-decoration: none;
        color: currentColor;
    }

    &:has(a.label-badge__label) {
        padding: 0;
    }

    &:has(.label-badge__remove-cta) {
        padding-right: 0;
        padding-block: 0;
    }

    &__remove-cta {
        color: currentColor;
        background-color: transparent;
        appearance: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
    }

    & > a.label-badge__label:hover,
    &__remove-cta:hover {
        background-color: var(--c--contextuals--background--semantic--contextual--primary-hover);
    }

    // == Modifiers
    &--compact {
        & > .label-badge__label {
            padding: var(--c--globals--spacings--4xs) var(--c--globals--spacings--3xs);
            font-size: var(--c--globals--font--sizes--t);
        }
    }
}
