import r, { keyframes as a } from "styled-components";
import { getFontSize as i, getSpacing as n, getColorAlias as t } from "../../utils/index.js";
const l = r.div`
  ${i("size16")};
  font-family: ${(e) => e.theme.font.familyPrimary};
  font-weight: ${(e) => e.theme.font.weightRegular};
  width: 100%;
  border-radius: ${(e) => e.theme.radius.roundedB};
  display: flex;
  flex-direction: column;
  min-width: 250px;
`, m = r.div`
  display: flex;
  justify-content: space-between;
  ${i("size14")};
  margin-bottom: ${n("s02")};
`, c = r.span`
  font-weight: ${(e) => e.theme.font.weightBold};
  color: ${t("contentDefault")};
  align-self: center;
`, h = r.span`
  color: ${t("contentSubdued")};
  align-self: center;
`, g = r.span`
  color: ${t("contentSubdued")};
  ${i("size14")};
  margin-top: ${n("s02")};
`, f = r.div`
  width: 100%;
  background: ${t("interactiveSecondary")};
  border-radius: ${(e) => e.theme.radius.roundedB};
  height: 6px;
  overflow: hidden;
`, u = r.div`
  background: ${({ color: e }) => e === "primary" ? t("interactivePrimary") : t("interactiveBrand")};

  width: ${(e) => e.width}%;
  border-radius: ${(e) => e.theme.radius.roundedB};
  height: 6px;
  text-align: center;
  min-width: max-content;
  transition: width ${(e) => e.theme.motion.speed.defaultL};
`, o = a`
  0% {transform:  translateX(0) scaleX(0);}
  40% {transform:  translateX(0) scaleX(0.4);}
  100% {transform:  translateX(100%) scaleX(0.5);}
`, $ = r.div`
  background: ${({ color: e }) => e === "primary" ? t("interactivePrimary") : t("interactiveBrand")};

  width: 100%;
  border-radius: ${(e) => e.theme.radius.roundedB};
  height: 6px;
  text-align: center;
  min-width: max-content;
  animation: ${o} 1s infinite linear;
  transform-origin: 0% 50%;
`;
export {
  g as AssistiveText,
  $ as IndeterminateProgressBarFiller,
  h as LabelDetailsText,
  c as LabelText,
  l as ProgressBarContainer,
  f as ProgressBarEmpty,
  u as ProgressBarFiller,
  m as ProgressBarHeader
};
