div:has(> [data-scope='progress'][data-part='root']) {
    @apply mx-auto;
}

[data-scope='progress'][data-part='root'] {
	@apply flex flex-col gap-2 w-full max-w-md mx-auto;
}

[data-scope='progress'][data-part='label'] {
	@apply text-sm font-medium text-foreground;
}

[data-scope='progress'][data-part='track'] {
	@apply h-2 w-full bg-muted rounded-full overflow-hidden;
}

[data-scope='progress'][data-part='range'] {
	@apply h-full bg-primary rounded-full transition-all duration-300 ease-out;
	width: var(--percent);
	--translate-x: -100%;
}

[data-scope='progress'][data-part='range'][dir='rtl'] {
	--translate-x: 100%;
}

[data-scope='progress'][data-part='range'][data-state='indeterminate'] {
	@apply w-[210%];
	animation: 1s cubic-bezier(0.694, 0.0482, 0.335, 1) 0s infinite normal none running indeterminate;
}

[data-scope='progress'][data-part='value-text'] {
	@apply text-sm font-medium text-muted-foreground text-right;
}

/* Control buttons */
[data-scope='progress'][data-part='root'] + div {
	@apply flex gap-2 justify-center mt-4;
}

[data-scope='progress'][data-part='root'] + div > button {
	@apply inline-flex items-center justify-center cursor-pointer font-medium px-4 py-1 bg-muted/50 border hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background text-sm rounded-md;
}

@keyframes indeterminate {
	0% {
		transform: scaleX(1) translateX(var(--translate-x));
	}
	100% {
		transform: scaleX(0) translateX(var(--translate-x));
	}
}
