@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
) from '../../styles/variables/_motion.css';

.lineContainer {
  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;
}