@st-namespace 'ProgressBar-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback, font;
}

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreLinearProgressBar/CoreLinearProgressBar.st.css";
    -st-default: LinearProgressBar;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: errorColor;
}

/*Defaults*/
:vars {
    BarHeightSmall: 4px;
    BarHeightLarge: 8px;

    DefaultBarColor: color-8;
    DefaultTextFont: font("{theme: 'Body-M', size: '12px', lineHeight: '1.4em'}");
    DefaultBarBGColor: color-5;
}

/*Overrides*/
:vars {
    /*Deceleration of overridable placeholders*/
    BarBGColor: --overridable;
    BarColor: --overridable;
    TextFont: --overridable;
}

/*
 * 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 {
  /*css goes here*/

}

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

.root:size(small) {
    height: value(BarHeightSmall)
}

.root:size(large) {
    height: value(BarHeightLarge)
}

.root::barContainer {
    /* safety background */
    background: rgba(255, 255, 255, 0.2);
}
.root:size(small)::barContainer {
    height: value(BarHeightSmall);
}
.root:size(large)::barContainer {
    height: value(BarHeightLarge);
}

.root::barBackground {
    background: color(fallback(value(BarBGColor), value(DefaultBarBGColor)));
    opacity: 0.2;
}

.root:size(small)::barBackground {
    height: value(BarHeightSmall)
}

.root:size(large)::barBackground {
    height: value(BarHeightLarge)
}

.root::barForeground {
    background: color(fallback(value(BarColor), value(DefaultBarColor)));
    transition: width .5s ease-in-out;
}

.root:size(small)::barForeground {
    height: value(BarHeightSmall);
}

.root:size(large)::barForeground {
    height: value(BarHeightLarge);
}

.root::progressPercentage, .root::suffixIndication, .root::prefixIndicationContainer {
    color: color(fallback(value(BarBGColor), value(DefaultBarBGColor)));
    font: fallback(font(value(TextFont)), font(value(DefaultTextFont)));
    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.deprecated.st.css" */