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

@mixin spinner($size: 1.5rem) {
	&::after {
		content: '';
		inline-size: $size;
		block-size: $size;
		border-radius: var(--pr-t-border-radius-full);
		line-height: 0.8rem;
		border-width: var(--commons-loading-borderWidth);
		inset: 0;
		margin: auto;
		position: absolute;
		border-style: solid;
		animation-name: rotate;
		animation-duration: var(--commons-loading-speed);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		border-color: var(--commons-loading-frontground);
		border-block-start-color: transparent;

		@include keyframe.rotate;
	}
}

@mixin gradient($backgroundColor: transparent, $color: color.transparentize(var(--palettes-neutral-900), 0.1)) {
	animation-name: loadingGradient;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	background-color: $backgroundColor;
	background-repeat: no-repeat;
	background-image: linear-gradient(315deg, $backgroundColor 40%, $color 50%, $backgroundColor 100%);
	background-size: 400% 100%;

	@keyframes loadingGradient {
		0% {
			background-position: 100% 0%;
		}

		100% {
			background-position: -100% 0%;
		}
	}
}