.status {
    --rocket-ui-status-dot-color: var(--rocket-color-grey-500);
    --rocket-ui-status-outline-color: var(--rocket-color-grey-500);
    --rocket-ui-status-text-color: var(--rocket-color-grey-700);

    $this: &;

    display: flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    color: var(--rocket-ui-status-text-color);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1;
    column-gap: 0.375rem;
    background: transparent;
    border-radius: 100px;

    &::before {
        @include size(0.5rem);

        display: block;
        background: var(--rocket-ui-status-dot-color);
        border-radius: 50%;
        content: '';
    }

    &--outline {
        border: 1px solid var(--rocket-ui-status-outline-color);
    }

    &--error {
        --rocket-ui-status-dot-color: var(--rocket-color-error-300);
    }

    &--info {
        --rocket-ui-status-dot-color: var(--rocket-color-info-300);
    }

    &--success {
        --rocket-ui-status-dot-color: var(--rocket-color-success-300);
    }

    &--warning {
        --rocket-ui-status-dot-color: var(--rocket-color-warning-300);
    }

    &--sm,
    &--xs {
        font-size: 0.75rem;
    }

    &--sm {
        min-height: 1.625rem;
    }

    &--xs {
        min-height: 1.25rem;

        &::before {
            @include size(0.375rem);
        }
    }

}