import styled, { css, keyframes } from 'styled-components';
import { Loader } from '../Loader/Loader';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var loaderGridUnit = spacing.sm;
var animationDelay = '300ms';
var fadeIn = /*#__PURE__*/keyframes(["from{opacity:1;}to{opacity:0;}"]);
export var StyledProgressBarLoader = /*#__PURE__*/styled(Loader).withConfig({
  displayName: "StyledProgressBarLoader",
  componentId: "core-11_23_1__sc-vdy2wl-0"
})([""]);
export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledProgressBar",
  componentId: "core-11_23_1__sc-vdy2wl-1"
})(["overflow:hidden;position:relative;display:block;height:", "px;background-color:", ";border-radius:", "px;margin:", "px 0;transition:background-color 0s linear;", " ", ""], loaderGridUnit, function (_ref) {
  var $complete = _ref.$complete;
  return $complete ? colors.blue50 : colors.gray94;
}, loaderGridUnit * 2, loaderGridUnit * 2, function (_ref2) {
  var $finalized = _ref2.$finalized;
  return $finalized && css(["transition-delay:", ";", "{animation:", " 0 ease-out ", " forwards;}"], animationDelay, StyledProgressBarLoader, fadeIn, animationDelay);
}, function (_ref3) {
  var $complete = _ref3.$complete,
    $finalized = _ref3.$finalized;
  return $complete && !$finalized && css(["", "{opacity:0;}"], StyledProgressBarLoader);
});
//# sourceMappingURL=ProgressBar.styles.js.map