@st-namespace 'ProgressBar-st-css';
@st-import [ --wix-color-5, --wix-color-8 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import LinearProgressBar from '../internal/WixUiCoreComponents/components/CoreLinearProgressBar/CoreLinearProgressBar.st.css';
@st-import [ errorColor ] from '../../common/palette.st.css';
@st-import [ --wst-links-and-actions-color-rgb, --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * Deceleration of overridable placeholders
 * @type color
*/
@property st-global(--wix-ui-tpa-progress-bar-bar-b-g-color);

/*
 * Bar color
 * @type color
 */
@property st-global(--wix-ui-tpa-progress-bar-bar-color);

/*
 * Text font
 * @type font
 */
@property st-global(--wix-ui-tpa-progress-bar-text-font);

.root {
    -st-extends: LinearProgressBar;
    -st-states: size(enum(small, large));
}

.root:size(small) {
    height: 4px
}

.root:size(large) {
    height: 8px
}

.root::barContainer {
    /* safety background */
    background: rgba(255, 255, 255, 0.2);
}

.root:size(small)::barContainer {
    height: 4px;
}

.root:size(large)::barContainer {
    height: 8px;
}

.root::barBackground {
    background: createColor(--wix-ui-tpa-progress-bar-bar-b-g-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    opacity: 0.2;
}

.root:size(small)::barBackground {
    height: 4px
}

.root:size(large)::barBackground {
    height: 8px
}

.root::barForeground {
    background: createColor(--wix-ui-tpa-progress-bar-bar-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
    transition: width .5s ease-in-out;
}

.root:size(small)::barForeground {
    height: 4px;
}

.root:size(large)::barForeground {
    height: 8px;
}

.root::progressPercentage,
.root::suffixIndication,
.root::prefixIndicationContainer {
    color: createColor(--wix-ui-tpa-progress-bar-bar-b-g-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4em", "size": "12px" }'),
    createFont((--wix-ui-tpa-progress-bar-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
    font-size: 12px;
}

/* gap between prefix and suffix indications and bar with rtl support */
.root::prefixIndicationContainer,
.root::indicationContainer {
    display: flex;
}

.root::prefixIndicationContainer::after,
.root::indicationContainer::before {
    content: '';
    width: 8px;
}

/* st-namespace-reference="../../../../src/components/ProgressBar/ProgressBar.st.css" */