.badge {
    --rocket-ui-badge-color-background: var(--rocket-color-grey-200);
    --rocket-ui-badge-border-color: var(--rocket-color-primary-400);
    --rocket-ui-badge-text-color: var(--rocket-color-primary-400);

    $this: &;

    display: inline-flex;
    padding: 0.25rem 0.5rem;
    color: var(--rocket-ui-badge-text-color);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: (20 / 14);
    background: var(--rocket-ui-badge-color-background);
    border: 1px solid var(--rocket-ui-badge-border-color);
    border-radius: 100px;

    &--outline-primary {
        --rocket-ui-badge-color-background: var(--rocket-color-white-base);
        --rocket-ui-badge-border-color: var(--rocket-color-primary-300);
        --rocket-ui-badge-text-color: var(--rocket-color-primary-300);
    }

    &--outline-error {
        --rocket-ui-badge-color-background: var(--rocket-color-white-base);
        --rocket-ui-badge-border-color: var(--rocket-color-error-300);
        --rocket-ui-badge-text-color: var(--rocket-color-error-300);
    }

    &--outline-info {
        --rocket-ui-badge-color-background: var(--rocket-color-white-base);
        --rocket-ui-badge-border-color: var(--rocket-color-info-300);
        --rocket-ui-badge-text-color: var(--rocket-color-info-300);
    }

    &--outline-success {
        --rocket-ui-badge-color-background: var(--rocket-color-white-base);
        --rocket-ui-badge-border-color: var(--rocket-color-success-400);
        --rocket-ui-badge-text-color: var(--rocket-color-success-400);
    }

    &--outline-warning {
        --rocket-ui-badge-color-background: var(--rocket-color-white-base);
        --rocket-ui-badge-border-color: var(--rocket-color-warning-300);
        --rocket-ui-badge-text-color: var(--rocket-color-warning-300);
    }

    &--outline-grey {
        --rocket-ui-badge-color-background: var(--rocket-color-white-base);
        --rocket-ui-badge-border-color: var(--rocket-color-grey-600);
        --rocket-ui-badge-text-color: var(--rocket-color-grey-600);
    }

    &--light-primary {
        --rocket-ui-badge-color-background: var(--rocket-color-primary-100);
        --rocket-ui-badge-border-color: var(--rocket-color-primary-100);
        --rocket-ui-badge-text-color: var(--rocket-color-primary-400);
    }

    &--light-error {
        --rocket-ui-badge-color-background: var(--rocket-color-error-100);
        --rocket-ui-badge-border-color: var(--rocket-color-error-100);
        --rocket-ui-badge-text-color: var(--rocket-color-error-400);
    }

    &--light-info {
        --rocket-ui-badge-color-background: var(--rocket-color-info-100);
        --rocket-ui-badge-border-color: var(--rocket-color-info-100);
        --rocket-ui-badge-text-color: var(--rocket-color-info-400);
    }

    &--light-success {
        --rocket-ui-badge-color-background: var(--rocket-color-success-100);
        --rocket-ui-badge-border-color: var(--rocket-color-success-100);
        --rocket-ui-badge-text-color: var(--rocket-color-success-400);
    }

    &--light-warning {
        --rocket-ui-badge-color-background: var(--rocket-color-warning-100);
        --rocket-ui-badge-border-color: var(--rocket-color-warning-100);
        --rocket-ui-badge-text-color: var(--rocket-color-warning-400);
    }

    &--light-grey {
        --rocket-ui-badge-color-background: var(--rocket-color-grey-200);
        --rocket-ui-badge-border-color: var(--rocket-color-grey-200);
        --rocket-ui-badge-text-color: var(--rocket-color-grey-600);
    }

    &--medium-primary {
        --rocket-ui-badge-color-background: var(--rocket-color-primary-300);
        --rocket-ui-badge-border-color: var(--rocket-color-primary-300);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--medium-error {
        --rocket-ui-badge-color-background: var(--rocket-color-error-300);
        --rocket-ui-badge-border-color: var(--rocket-color-error-300);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--medium-info {
        --rocket-ui-badge-color-background: var(--rocket-color-info-300);
        --rocket-ui-badge-border-color: var(--rocket-color-info-300);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--medium-success {
        --rocket-ui-badge-color-background: var(--rocket-color-success-300);
        --rocket-ui-badge-border-color: var(--rocket-color-success-300);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--medium-warning {
        --rocket-ui-badge-color-background: var(--rocket-color-warning-300);
        --rocket-ui-badge-border-color: var(--rocket-color-warning-300);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--dark-primary {
        --rocket-ui-badge-color-background: var(--rocket-color-primary-400);
        --rocket-ui-badge-border-color: var(--rocket-color-primary-400);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--dark-error {
        --rocket-ui-badge-color-background: var(--rocket-color-error-400);
        --rocket-ui-badge-border-color: var(--rocket-color-error-400);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--dark-info {
        --rocket-ui-badge-color-background: var(--rocket-color-info-400);
        --rocket-ui-badge-border-color: var(--rocket-color-info-400);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--dark-success {
        --rocket-ui-badge-color-background: var(--rocket-color-success-400);
        --rocket-ui-badge-border-color: var(--rocket-color-success-400);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--dark-warning {
        --rocket-ui-badge-color-background: var(--rocket-color-warning-400);
        --rocket-ui-badge-border-color: var(--rocket-color-warning-400);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--dark-grey {
        --rocket-ui-badge-color-background: var(--rocket-color-grey-600);
        --rocket-ui-badge-border-color: var(--rocket-color-grey-600);
        --rocket-ui-badge-text-color: var(--rocket-color-white-base);
    }

    &--sm {
        font-size: 0.75rem;
        line-height: (16 / 12);
    }

    &--xs {
        padding: 0.125rem 0.425rem;
        font-size: 0.75rem;
        line-height: (16 / 12);
    }
}