@use "~admin-stylesheets/colors";

.nelio-content-progress-bar {
	background: colors.$layout-colors__background--is-emphasized;
	border-radius: 2px;
	height: 2em;
	overflow: hidden;
	position: relative;
	width: 100%;

	&__actual-bar {
		background: #69be7a;
		height: 100%;

		&--is-animated {
			animation: nelio-content-progress-bar-animation 2s linear infinite;
			background-image: linear-gradient(
				-45deg,
				rgba(255, 255, 255, 0.125) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255, 255, 255, 0.125) 50%,
				rgba(255, 255, 255, 0.125) 75%,
				transparent 75%,
				transparent
			);
			background-size: 35px 35px;
		}
	}

	&__label-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__label {
		text-shadow:
			#fff 1px 0,
			#fff 1px 1px,
			#fff 0 1px,
			#fff -1px 0,
			#fff -1px -1px,
			#fff 0 -1px;
	}
}

@keyframes nelio-content-progress-bar-animation {

	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 35px 35px;
	}
}