"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Background = exports.Value = exports.Container = void 0;
const theme_1 = require("../../../theme");
const Container = (0, theme_1.styled)("div", {
    "height": (0, theme_1.dimensionsPxToRem)(20),
    "position": "relative",
    "overflow": "hidden",
    "variants": {
        size: {
            big: {
                height: (0, theme_1.dimensionsPxToRem)(40),
            },
        },
    },
    "--value-border-color": "$colors$blue5",
    "--value-background-color": "$colors$blue4",
    "--container-border-color": "$colors$border",
    "--container-background-color": "$colors$toggleBgDisabled",
});
exports.Container = Container;
const sharedValueStyles = (0, theme_1.css)({
    position: "absolute",
    top: 0,
    height: "100%",
    borderRadius: "9999px",
    border: `${(0, theme_1.borderPxToRem)(1)} solid $border`,
    background: "$background",
});
const Value = (0, theme_1.styled)("div", sharedValueStyles, {
    borderColor: "var(--value-border-color)",
    background: "var(--value-background-color)",
    transition: "right 0.3s, border-width 0.3s, left 0.3s",
    variants: {
        zero: {
            true: {
                borderWidth: 0,
            },
        },
    },
});
exports.Value = Value;
const Background = (0, theme_1.styled)("div", sharedValueStyles, {
    borderColor: "var(--container-border-color)",
    background: "var(--container-background-color)",
    width: "100%",
});
exports.Background = Background;
//# sourceMappingURL=Progress.styled.js.map