.progress-bar {
    --rocket-ui-progress-background-color: var(--rocket-color-grey-400);
    --rocket-ui-progress-color: var(--rocket-color-primary-300);
    --rocket-ui-progress-percent-color: var(--rocket-color-grey-700);

    $this: &;

    display: flex;
    align-items: center;
    width: 100%;

    &__line {
        width: 100%;
        height: 0.5rem;
        background: var(--rocket-ui-progress-background-color);
        border-radius: 0.5rem;
    }

    &__fill {
        height: 100%;
        background: var(--rocket-ui-progress-color);
        border-radius: 0.5rem;
    }

    &__text {
        margin: 0 0 0 12px;
        color: var(--rocket-ui-progress-percent-color);
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.43;

        &::after {
            content: '%';
        }
    }

    &--sm {
        #{$this} {
            &__line {
                height: 0.25rem;
            }

            &__text {
                font-size: 0.75rem;
            }
        }
    }

    &--xl {
        #{$this} {
            &__line {
                height: 0.75rem;
            }

            &__text {
                font-size: 1rem;
            }
        }
    }
}