.ui-progress-bar {
    --ui-progress-bar-small-height: var(--space-half);
    --ui-progress-bar-medium-height: var(--space);
    --ui-progress-bar-large-height: var(--space-x2);
    --ui-progress-bar-extra-large-height: var(--space-x3);
    --ui-progress-bar-radius: 100px;

    width: 100%;
}

.ui-progress-bar[value] {
    width: 100%;
    height: var(--ui-progress-bar-small-height);
    appearance: none;
}

.ui-progress-bar[t-size="medium"][value] {
    height: var(--ui-progress-bar-medium-height);
}

.ui-progress-bar[t-size="large"][value] {
    height: var(--ui-progress-bar-large-height);
}

.ui-progress-bar[t-size="extra-large"][value] {
    height: var(--ui-progress-bar-extra-large-height);
}

.ui-progress-bar[value]::-webkit-progress-bar {
    background-color: var(--theme-fill-40);
    border-radius: var(--ui-progress-bar-radius);
}

.ui-progress-bar[value]::-webkit-progress-value {
    background-color: var(--ui-progress-bar-color-override, var(--theme-emphasis-fill));
    border-radius: var(--ui-progress-bar-radius);
}

.ui-progress-bar[t-size="medium"][value]::-webkit-progress-value {
    min-width: var(--ui-progress-bar-medium-height);
}

.ui-progress-bar[t-size="large"][value]::-webkit-progress-value {
    min-width: var(--ui-progress-bar-large-height);
}

.ui-progress-bar[t-size="extra-large"][value]::-webkit-progress-value {
    min-width: var(--ui-progress-bar-extra-large-height);
}

.ui-progress-bar--empty[value]::-webkit-progress-value {
    display: none;
}

.ui-progress-bar--full {
    --ui-progress-bar-color-override: var(--theme-success-20);
}