@utility progress {
	@apply rounded-box text-base-content relative h-2 w-full appearance-none overflow-hidden bg-current/20;
	&:indeterminate {
		background-image: repeating-linear-gradient(
			90deg,
			currentColor -1%,
			currentColor 10%,
			#0000 10%,
			#0000 90%
		);
		background-size: 200%;
		background-position-x: 15%;
		@media (prefers-reduced-motion: no-preference) {
			animation: progress 5s ease-in-out infinite;
		}

		@supports (-moz-appearance: none) {
			&::-moz-progress-bar {
				@apply bg-transparent;
				@media (prefers-reduced-motion: no-preference) {
					animation: progress 5s ease-in-out infinite;
					background-image: repeating-linear-gradient(
						90deg,
						currentColor -1%,
						currentColor 10%,
						#0000 10%,
						#0000 90%
					);
					background-size: 200%;
					background-position-x: 15%;
				}
			}
		}
	}

	@supports (-moz-appearance: none) {
		&::-moz-progress-bar {
			@apply rounded-box bg-current;
		}
	}

	@supports (-webkit-appearance: none) {
		&::-webkit-progress-bar {
			@apply rounded-box bg-transparent;
		}

		&::-webkit-progress-value {
			@apply rounded-box;
			background-color: currentColor;
		}
	}
}

@utility progress-primary {
	@apply text-primary;
}

@utility progress-secondary {
	@apply text-secondary;
}

@utility progress-accent {
	@apply text-accent;
}

@utility progress-neutral {
	@apply text-neutral;
}

@utility progress-info {
	@apply text-info;
}

@utility progress-success {
	@apply text-success;
}

@utility progress-warning {
	@apply text-warning;
}

@utility progress-error {
	@apply text-error;
}
@utility progress-notice {
	@apply text-notice;
}
@utility progress-alert {
	@apply text-alert-color;
}

@keyframes progress {
	50% {
		background-position-x: -115%;
	}
}

.radial-dial {
	@apply flex flex-col items-center;
	--radial-radius: 25px;
	--radial-border-width: 6px;
	--radial-background: transparent;
}
.radial-indicator {
	position: relative;
	background: conic-gradient(
		var(--radial-color, #fff000) 0%,
		var(--radial-color, #fff000) var(--end-angle, 0%),
		var(--radial-background) var(--end-angle, 0%),
		var(--radial-background) 100%
	);
	width: var(--radial-radius);
	height: var(--radial-radius);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.radial-indicator .radial-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(var(--radial-radius) - var(--radial-border-width));
	height: calc(var(--radial-radius) - var(--radial-border-width));
	left: calc(var(--radial-border-width) / 2);
	top: calc(var(--radial-border-width) / 2);
	position: absolute;
	background-color: #333;
	border-radius: 50%;
}