button.tag [data-role='remove'] {
    --bs-btn-close-color: #000;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-opacity: 1;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgb(255 255 255 / 25%);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    margin-left: 3px;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity);
}

button.tag [data-role='remove']:hover {
    color: var(--bs-btn-close-color);
    text-decoration: none;
    opacity: var(--bs-btn-close-hover-opacity);
    cursor: pointer !important;
}

button.tag {
    font-size: 9px;
    margin-right: 2px;
    color: white;
}

.badge {
    margin: 1px 1px;
}

.badge:not(.add) {

    --bs-badge-font-weight: unset !important;
    --bs-badge-padding-y: 0.5em !important;
    --bs-badge-padding-x: 0.8em;
    --bs-border-radius: 0.600rem !important;

    --bs-border-color: var(--azul-claro);
}

.badge.add {
    --bs-badge-font-weight: unset !important;
    --bs-badge-padding-y: 0.3em !important;
    --bs-badge-padding-x: 0.4em;
    aspect-ratio: 1/1;
    vertical-align: middle;
    --bs-border-radius: 0.500rem !important;
    --bs-border-color: var(--azul-claro);
}