'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const ProgressBarContainer = styled__default['default'].div `
  ${index.getFontSize('size16')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightRegular};
  width: 100%;
  border-radius: ${(props) => props.theme.radius.roundedB};
  display: flex;
  flex-direction: column;
  min-width: 250px;
`;
const ProgressBarHeader = styled__default['default'].div `
  display: flex;
  justify-content: space-between;
  ${index.getFontSize('size14')};
  margin-bottom: ${index.getSpacing('s02')};
`;
const LabelText = styled__default['default'].span `
  font-weight: ${(props) => props.theme.font.weightBold};
  color: ${index.getColorAlias('contentDefault')};
  align-self: center;
`;
const LabelDetailsText = styled__default['default'].span `
  color: ${index.getColorAlias('contentSubdued')};
  align-self: center;
`;
const AssistiveText = styled__default['default'].span `
  color: ${index.getColorAlias('contentSubdued')};
  ${index.getFontSize('size14')};
  margin-top: ${index.getSpacing('s02')};
`;
const ProgressBarEmpty = styled__default['default'].div `
  width: 100%;
  background: ${index.getColorAlias('interactiveSecondary')};
  border-radius: ${(props) => props.theme.radius.roundedB};
  height: 6px;
  overflow: hidden;
`;
const ProgressBarFiller = styled__default['default'].div `
  background: ${({ color }) => color === 'primary'
    ? index.getColorAlias('interactivePrimary')
    : index.getColorAlias('interactiveBrand')};

  width: ${(props) => props.width}%;
  border-radius: ${(props) => props.theme.radius.roundedB};
  height: 6px;
  text-align: center;
  min-width: max-content;
  transition: width ${(props) => props.theme.motion.speed.defaultL};
`;
const IndeterminateBarAnimation = styled.keyframes `
  0% {transform:  translateX(0) scaleX(0);}
  40% {transform:  translateX(0) scaleX(0.4);}
  100% {transform:  translateX(100%) scaleX(0.5);}
`;
const IndeterminateProgressBarFiller = styled__default['default'].div `
  background: ${({ color }) => color === 'primary'
    ? index.getColorAlias('interactivePrimary')
    : index.getColorAlias('interactiveBrand')};

  width: 100%;
  border-radius: ${(props) => props.theme.radius.roundedB};
  height: 6px;
  text-align: center;
  min-width: max-content;
  animation: ${IndeterminateBarAnimation} 1s infinite linear;
  transform-origin: 0% 50%;
`;

exports.AssistiveText = AssistiveText;
exports.IndeterminateProgressBarFiller = IndeterminateProgressBarFiller;
exports.LabelDetailsText = LabelDetailsText;
exports.LabelText = LabelText;
exports.ProgressBarContainer = ProgressBarContainer;
exports.ProgressBarEmpty = ProgressBarEmpty;
exports.ProgressBarFiller = ProgressBarFiller;
exports.ProgressBarHeader = ProgressBarHeader;
