// ===================================
// ============= Mixins ==============
// ===================================

// Coloring support
// ===================================

%lui_light_progress_indicator {
	> .indicator:before {
		background: rgba(255, 255, 255, 0.75);
	}
}
%lui_dark_progress_indicator {
	> .indicator:before {
		background: rgba(50, 50, 50, 0.5);
	}
}

@mixin lui_progressbar_coloring($scheme) {
	> .indicator {
		background: map-get($scheme, color);
	}
	&:not(.slim) > .indicator {
		color: map-get($scheme, text);
	}

	@if luiIsLod($scheme) {
		> .indicator:before {
			background: rgba(255, 255, 255, 0.75);
		}
	} @else {
		> .indicator:before {
			background: rgba(50, 50, 50, 0.5);
		}
	}
}

@keyframes progressing {
	from { opacity: 1; width: 0; }
	to	{ opacity: 0; width: 100%; }
}


// ===================================
// ============= Element =============
// ===================================

@if luiTheme(element, progress, enabled) {
	@at-root #{$namespace} {
		$vars: luiTheme(element, progress);

		#{$prefix}.progress {
			background: map-gets($vars, background);
			border-radius: map-gets($vars, borderRadius);
			margin: map-gets($vars, verticalMargin) 0;
		}

		// Progress indicator
		// ===================================
		#{$prefix}.progress > .indicator {
			position: relative;
			height: map-gets($vars, height);
			border-radius: map-gets($vars, borderRadius);

			transition: width 0.3s ease-out;

			&:after {
				display: block;
				position: absolute;
				top: 0; bottom: 0; right: 0.5em;
				content: attr(data-percentage) "%";
				line-height: map-gets($vars, height);
			}
		}

		// Progress status
		// A progress bar can have a status message below it
		// ===================================
		#{$prefix}.progress .status {
			text-align: center;
			font-weight: map-gets($vars, status, fontWeight);
		}

		// Progressing: play animation
		// ===================================
		#{$prefix}.progressing.progress > .indicator:before {
			display: block;
			content: "";
			position: absolute;
			left: 0; top: 0; bottom: 0;

			animation-name: progressing;
			animation-duration: 1.5s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-out;
		}

		// Slim progress bar
		// ===================================
		#{$prefix}.progress.slim {
			margin-top: (1em + map-gets($vars, verticalMargin));
			> .indicator {
				height: map-gets($vars, slimHeight);
				&:after {
					right: 0;
					-ms-transform: translateX(50%);
					transform: translateX(50%);
					line-height: 1;
					top: -1.1em;
				}
			}
		}

		// Coloring support
		// ===================================

		#{$prefix}.progress {
			// Default coloring
			@include lui_progressbar_coloring(map-get($vars, defaultColoring));
			// Loop colors
			@each $name, $scheme in luiPalettes() {
				&.#{map-get($scheme, class)} {
					@include lui_progressbar_coloring($scheme);
				}
			}
		}

		// ===================================
		// ============= Mixins ==============
		// ===================================

		#{$prefix}.progress-bar {
			position: fixed;
			top: 0px;
			z-index: map-gets($vars, progressBar, zIndex);
			width: 100%;
			overflow: hidden;
			background-color: transparent;
			margin: 0 !important;

			transition-property: opacity, height;
			transition-duration: map-gets($vars, progressBar, fadeInDuration);
			transition-timing-function:  ease-out;
		}

		#{$prefix}.progress-bar.in{
			opacity: 1;
			height: map-gets($vars, progressBar, height);
		}


		#{$prefix}.progress-bar.out{
			opacity: 0;
			height: 0;
		}
	}
}