/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}progress {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */


	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// progress__bar
	&__bar {

		// follows same logic as parent

		&:not(:last-child) {

			border-top-right-radius: 0;
			border-bottom-right-radius: 0;

		}

		& + & {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

		@include custom-prop-fallback("background-color", "comp-progress-bar-segment-background-color");

		&.-negative {

			@include custom-prop-fallback("background-color", "sys-color-background-status-danger-100");

			&.-faded {

				@include custom-prop-fallback("background-color", "sys-color-background-secondary-30");

			}

		}

		&.-positive {

			@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");

		}

		&.-black {

			@include custom-prop-fallback("background-color", "sys-color-background-neutral-black");

		}

	}
	
	&__badge {

		position: relative;
		z-index: z("low");

	}


	/* modifiers */

	// progress -small
	&.-small {

		// follows same logic as base element

		height: map-deep-get($token-sizes-unit-map, "4");

	}

	// progress -xtraSmall
	&.-xtraSmall {

		height: $border-width*2;

	}

	&.-stepper {

		@include custom-prop-fallback("background-color", "sys-color-background-primary-60");

		#{$self}__bar {
			@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

	}

	&.-primary {

		@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");

		#{$self}__badge,
		#{$self}__bar {

			@include custom-prop-fallback("background-color", "comp-progress-bar-segment-background-color");

		}

	}

	&.-success {

		@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");

		#{$self}__bar {

			@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");

		}

	}

	&.-hasBadge {

		overflow: visible;
		background-color: transparent;
		height: auto !important;
		align-items: center;

		&::before {

			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
			@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");
			height: $border-width*2;

		}

		#{$self}__bar {
			overflow: visible;
			position: relative;
		}

		&.-xtraSmall {

			#{$self}__bar {
				height: $border-width*2;
			}

		}

	}

	&.-validityGradient {

		#{$self}__bar {

			mask: linear-gradient(to left, rgba(map-deep-get($token-color-grayscale-map,"0"),1), rgba(map-deep-get($token-color-grayscale-map,"0"),1));

			&::before {
				
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				@include gradient-x-three-colors(map-deep-get($token-color-brand-map, "success", "100"), map-deep-get($token-color-brand-map, "warning", "100"), map-deep-get($token-color-brand-map, "primary", "100"), 25%, 50%, 75%);
			}

			&.-validityMask {

				position: absolute;
				top: 0;
				right: 0;
				height: 100%;
				@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");

			}
			
		}

	}

	&.-validityGradientNoProgress {

		position: relative;
		overflow: visible;

		@include gradient-x-three-colors(map-deep-get($token-color-brand-map, "primary", "100"), map-deep-get($token-color-brand-map, "warning", "100"), map-deep-get($token-color-brand-map, "success", "100"), 15%, 25%, 75%);

		#{$self}__indicator {

			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: map-deep-get($token-sizes-unit-map, "4");
			height: map-deep-get($token-sizes-unit-map, "24");
			border-radius: map-deep-get($token-radius-map, "2");
			@include custom-prop-fallback("background-color", "sys-color-background-neutral-black");

		}

	}

	&.-noBg {

		background-color: transparent !important;

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}