"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Progress = exports.ProgressBar = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const utils_1 = require("../../../utils");
const Colors_1 = require("../../../core/Colors");
exports.ProgressBar = styled_1.default.div `
	position: absolute;
	width: 100%;
	top: 0;
	height: 3px;
	background-color: ${Colors_1.basicColors.gray50};
`;
exports.Progress = styled_1.default.div `
	width: ${({ progress }) => progress}%;
	background-color: ${({ colorType }) => (0, utils_1.progressBarColorStyle)(colorType).upperColor};
	height: 100%;
	transition: width 3s ease-in-out;
`;
