@mixin progressBar() {
	position: relative;
	display: block;
	padding-top: 2rem;
	&__progress {
		transition: $fastTrans;
		@media (prefers-reduced-motion) {
			transition: none;
		}
		overflow: hidden;
		height: 0.5rem;
		&::before {
			content: "";
			width: 100%;
			height: 0.5rem;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}
	}
	&__label {
		transition: $fastTrans;
		@media (prefers-reduced-motion) {
			transition: none;
		}
		position: absolute;
		padding: 0.25rem 0.4rem;
		font-size: 80%;
		white-space: nowrap;
		line-height: 1;
		z-index: 999;
		pointer-events: none;
		opacity: 0;
		@include progressBarLabelPositions();
	}
	&:hover {
		.dui__progressbar__label {
			opacity: 1;
		}
	}
}

$progressBarLabelPositions: (
	"left": (
		"name": "left",
		"value": 0,
		"transform": translate(0, calc(-125% - 0.5rem)),
	),
	"right": (
		"name": "right",
		"value": 0,
		"transform": translate(0, calc(-125% - 0.5rem)),
	),
	"top": (
		"name": "top",
		"value": 0,
		"transform": translate(-50%, calc(75% - 0.5rem)),
	),
	"bottom": (
		"name": "bottom",
		"value": 0,
		"transform": translate(-50%, 125%),
	),
);

@mixin progressBarLabelPositions() {
	$positionKeys: map-keys($progressBarLabelPositions);
	@each $key in $positionKeys {
		$name: map-deep-get($progressBarLabelPositions, $key, "name");
		$value: map-deep-get($progressBarLabelPositions, $key, "value");
		$transform: map-deep-get($progressBarLabelPositions, $key, "transform");

		&.dui__progressbar__label--#{$name} {
			#{$name}: $value;
			transform: $transform;
		}
	}
}

.dui__progressbar {
	@include progressBar();

	&--label-always {
		.dui__progressbar__label {
			opacity: 1;
		}
	}

	&--no-track {
		.dui__progressbar__progress {
			&::before {
				display: none;
			}
		}
	}
}

@mixin progressRing() {
	position: relative;
	@include crossBrowser(user-select, none);
	& > circle {
		fill: transparent;
		transition: stroke-dashoffset $slowTransTime $slowTransEase;
		@media (prefers-reduced-motion) {
			transition: none;
		}
		transform: rotate(-90deg);
		transform-origin: 50% 50%;
	}
	.dui__progressring__label {
		transition: $fastTrans;
		@media (prefers-reduced-motion) {
			transition: none;
		}
		font-weight: 700;
		stroke-width: 0;
		opacity: 0;
	}
	&:hover {
		.dui__progressring__label {
			opacity: 1;
		}
	}
}

.dui__progressring {
	@include progressRing();

	&--reversed {
		& > circle {
			transform: rotate(-90deg) rotateX(180deg);
		}
	}
	&--label-always {
		.dui__progressring__label {
			opacity: 1;
		}
	}
}