@use "../../styles/variables";

.ObProgressBar-root {
	height: 1.5em;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: whiteSmoke;
	border: none;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
	color: royalblue;
	position: relative;

	&::-webkit-progress-bar {
		background-color: whiteSmoke;
		border-radius: 3px;
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
	}

	&::-webkit-progress-value {
		background-image:
			linear-gradient(
				135deg,
				transparent,
				transparent 33%,
				rgba(0, 0, 0, 0.1) 33%,
				rgba(0, 0, 0, 0.1) 66%,
				transparent 66%
			),
			linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
			linear-gradient(left, var(--brand-primary), var(--brand-light));
		background-image:
			-webkit-linear-gradient(
				135deg,
				transparent,
				transparent 33%,
				rgba(0, 0, 0, 0.1) 33%,
				rgba(0, 0, 0, 0.1) 66%,
				transparent 66%
			),
			-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
			-webkit-linear-gradient(left, var(--brand-primary), var(--brand-light));
		background-size:
			35px 20px,
			100% 100%,
			100% 100%;
		border-radius: 3px;
		position: relative;
		transition: width 0.5s ease-out;
	}

	&::-webkit-progress-value:after {
		background-color: white;
		content: "";

		border-radius: 100%;
		height: 5px;

		position: absolute;
		right: 7px;
		top: 7px;
		width: 5px;
	}

	&::-moz-progress-bar {
		background-image:
			linear-gradient(
				135deg,
				transparent,
				transparent 33%,
				rgba(0, 0, 0, 0.1) 33%,
				rgba(0, 0, 0, 0.1) 66%,
				transparent 66%
			),
			linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
			linear-gradient(left, var(--brand-primary), var(--brand-light));
		background-image:
			-moz-linear-gradient(
				135deg,
				transparent,
				transparent 33%,
				rgba(0, 0, 0, 0.1) 33%,
				rgba(0, 0, 0, 0.1) 66%,
				transparent 66%
			),
			-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
			-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));
		background-size:
			35px 20px,
			100% 100%,
			100% 100%;
		border-radius: 3px;
		transition: width 0.5s ease-out;
	}
}