@use "../../00-base/colors/colors";

@keyframes progress{
	0%{
		width: 0;
		margin-right: 0;
	}

	100%{
		width: 100%;
	}
}

.hoo-progress{
	background-color: colors.$neutral-200;
	display: block;

	width: 100%;
    height: 2px;

	content: " ";

	&-indicator{
		width: 0;
		height: 100%;

		content: " ";
		animation-name: progress;
		:local{
			animation-name: progress;
		}
		animation-duration: 4s;
		/* or: Xms */
		animation-timing-function: linear;
		/* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
		animation-delay: 0s;
		/* or: Xms */
		animation-iteration-count: infinite;
		animation-direction: normal;
		/* or: normal */

		background-color: colors.$theme-900;

		animation-fill-mode: forwards;
		/* or: backwards, both, none */
	}
}