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

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

    display: inline-flex;
    align-items: flex-start;

    user-select: none;

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

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

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

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

    > .Icon {
        margin: 5px;
    }

    > .title {
        font-size: var(--font-size-smaller);
        line-height: var(--font-line-height-short);
        font-weight: 500;
        margin-top: 4.5px;
    }

    &.small {
        &:has(.Icon) {
            padding: 0px;

            > .Icon {
                --size: var(--icon-size-small);
            }
        }
    }

    &.hollow {
        --bgColor: transparent !important;
        --fgColor: currentColor;
        padding: 0;
    }

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

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

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

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