@use '@lucca-front/scss/src/commons/utils/keyframe';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-progress-background);
	border-radius: var(--pr-t-border-radius-full);
	block-size: var(--components-progress-height);
	margin-block: var(--components-progress-margin-vertical);
	margin-inline: var(--components-progress-margin-horizontal);
	position: relative;
	overflow: hidden;

	@keyframes progress {
		0% {
			transform: scale(0, 1);
			opacity: 1;
		}

		100% {
			transform: scale(1, 1);
			opacity: 0.3;
		}
	}

	@at-root ($atRoot) {
		.progress-bar {
			background-color: var(--palettes-700, var(--components-progress-bar-background));
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: background-color, width;
			inset-block: 0;
			inset-inline-start: 0;
			position: absolute;

			&::after {
				animation: progress var(--components-progress-duration) infinite;
				background-image: var(--components-progress-bar-gradient);
				transform-origin: left;
				position: absolute;
				inset: 0;
				content: '';
			}
		}
	}
}