.Badge {
    --bgColor: var(--color-base);
    --fgColor: #fff;

    border-radius: var(--border-radius);
    background-color: var(--bgColor);
    color: var(--fgColor);

    display: flex;
    align-items: center;

    &:has(.Icon) {
        padding: 1.5px;
        &:has(.title) {
            padding-right: 8px;
        }
    }

    :has(.title) {
        padding: 3px 8px;
    }

    user-select: none;

    &.centered {
        margin-left: auto;
        margin-right: auto;
    }

    &.isolated {
        margin-top: var(--base-gap);
        margin-bottom: var(--base-gap);
    }

    &.warning {
        --bgColor: var(--color-warning);
    }

    &.error {
        --bgColor: var(--color-error);
    }

    > .Icon {
        margin: 5px;
    }

    > .title {
        font-size: var(--font-size-small);
        font-weight: 500;
    }
}