@value (
  borderRadiusSmall
) from '../../styles/variables/_border.css';

@value (colorFillPrimary, colorBorderPrimary) from '../../styles/variables/_color.css';

@value (
  size4,
  size8,
  size12,
  sizeFluid
) from '../../styles/variables/_size.css';

@value (
  motionDurationSlow,
  motionDurationSlowest,
  motionEaseInEaseOut
) from '../../styles/variables/_motion.css';

@value (
  spaceNone,
  spaceFluid
) from '../../styles/variables/_space.css';

.lineContainer {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: sizeFluid;
  background: colorBorderPrimary;
  border-radius: borderRadiusSmall;
}

.large {
  height: size12;
}

.medium {
  height: size8;
}

.small {
  height: size4;
}

.progressBar {
  background: colorFillPrimary;
  border-radius: borderRadiusSmall;
  height: sizeFluid;
  transition: motionDurationSlow;
}

.indeterminate {
  position: absolute;

  animation: infiniteProgressBar calc(motionDurationSlowest * 3)
    motionEaseInEaseOut;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

@keyframes infiniteProgressBar {
  0% {
    left: spaceNone;
    width: spaceNone;
  }
  50% {
    left: spaceNone;
    width: spaceFluid;
  }
  100% {
    left: spaceFluid;
    width: spaceNone;
  }
}