@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-ProgressBar {
	@bar-width: 5000px;

	.pulse(@color) {
		background-color: @color-white;
		background-image: linear-gradient(to right, @color 15%, fade(@color, 25%) 25%, @color 15%);
		animation: ~"@{prefix}-ProgressBar-is-pulsing" 3s linear 0s infinite;
	}

	&-bar-container {
		overflow: hidden;
		position: relative;
		margin: @size-S 0;
	}

	&-bar {
		background: @color-primary;
		height: @size-XXS;
		min-width: @bar-width;

		&-default {
			background: @color-primary;

			&-is-pulsed {
				.pulse(@color-primary);
			}
		}

		&-success {
			background: @featured-color-success-borderColor;

			&-is-pulsed {
				.pulse(@featured-color-success-borderColor);
			}
		}

		&-danger {
			background: @featured-color-danger-borderColor;

			&-is-pulsed {
				.pulse(@featured-color-danger-borderColor);
			}
		}

		&-info {
			background: @featured-color-info-borderColor;

			&-is-pulsed {
				.pulse(@featured-color-info-borderColor);
			}
		}

		&-warning {
			background: @featured-color-warning-borderColor;

			&-is-pulsed {
				.pulse(@featured-color-warning-borderColor);
			}
		}
	}

	&-bar-overlay {
		background-color: @color-lightGray;
		height: @size-XXS;
		transition: width @timing-animation-fade ease-in-out;
		position: absolute;
		right: 0;
		top: 0;
	}

	&-title {
		display: flex;
		margin: @size-XS;
		font-weight: 500;
	}

	@keyframes ~"@{prefix}-ProgressBar-is-pulsing" {
		from { background-position: 0; }
		to { background-position: @bar-width; }
	}
}