@use '@lucca-front/scss/src/commons/config';

@mixin skeletonBodySizing($sizes...) {
	@each $size in $sizes {
		&.pr-u-body#{$size} {
			@if ($size == 'XS') {
				--components-skeleton-text-offset: 0.25rem;

				block-size: var(--pr-t-font-body-XS-lineHeight);
			}

			@if ($size == 'S') {
				--components-skeleton-text-offset: 0.375rem;

				block-size: var(--pr-t-font-body-S-lineHeight);
			}
		}

		// Deprecated .u- utilities
		@if config.$deprecatedUtilityPrefix {
			&.u-body#{$size} {
				@if ($size == 'XS') {
					--components-skeleton-text-offset: 0.25rem;

					block-size: var(--pr-t-font-body-XS-lineHeight);
				}

				@if ($size == 'S') {
					--components-skeleton-text-offset: 0.375rem;

					block-size: var(--pr-t-font-body-S-lineHeight);
				}
			}
		}
	}
}

@mixin skeletonTitleSizing($titles...) {
	@each $title in $titles {
		&:is(.pr-u-h#{$title}, h#{$title}) {
			block-size: auto;

			@if ($title == '5') {
				line-height: 1.25rem;
				min-block-size: 1.25rem;
			} @else if ($title == '6') {
				line-height: 1rem;
				min-block-size: 1rem;
			} @else {
				line-height: var(--pr-t-font-heading-#{$title}-lineHeight);
				min-block-size: var(--pr-t-font-heading-#{$title}-lineHeight);
			}

			@if ($title == '1') {
				--components-skeleton-text-offset: 0.5rem;
			}

			@if ($title == '2' or $title == '3' or $title == '4' or $title == '5') {
				--components-skeleton-text-offset: 0.375rem;
			}

			@if ($title == '6') {
				--components-skeleton-text-offset: 0.25rem;
			}
		}

		// Deprecated .u- utilities
		@if config.$deprecatedUtilityPrefix {
			&:is(.u-h#{$title}, h#{$title}) {
				block-size: auto;

				@if ($title == '5') {
					line-height: 1.25rem;
					min-block-size: 1.25rem;
				} @else if ($title == '6') {
					line-height: 1rem;
					min-block-size: 1rem;
				} @else {
					line-height: var(--pr-t-font-heading-#{$title}-lineHeight);
					min-block-size: var(--pr-t-font-heading-#{$title}-lineHeight);
				}

				@if ($title == '1') {
					--components-skeleton-text-offset: 0.5rem;
				}

				@if ($title == '2' or $title == '3' or $title == '4' or $title == '5') {
					--components-skeleton-text-offset: 0.375rem;
				}

				@if ($title == '6') {
					--components-skeleton-text-offset: 0.25rem;
				}
			}
		}
	}
}

@mixin loading {
	animation: skeletonPulse 1.5s infinite ease-in-out;

	.skeleton-item {
		animation: skeletonBackground 1.5s infinite linear;
		background-image:
			linear-gradient(
				90deg,
				var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),
				var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),
				var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50))
			);
		background-size: 150% 100%;
		background-repeat: repeat-x;
		display: block;

		&:not(.mod-square, .mod-circle) {
			@include skeletonBodySizing('XS', 'S');
			@include skeletonTextSizing('XS', 'S', 'L', 'XL', 'XXL');
			@include skeletonTitleSizing('1', '2', '3', '4', '5', '6');

			clip-path:
				inset(
					calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%))
					calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound)
				);
			block-size: var(--pr-t-font-body-M-lineHeight);
			inline-size: 100%;
		}
	}

	// background gradient animation
	@keyframes skeletonBackground {
		0% {
			background-position: 150% 50%;
		}

		100% {
			background-position: -150% 50%;
		}
	}

	// pulse animation
	@keyframes skeletonPulse {
		0% {
			opacity: 0.9;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.9;
		}
	}
}

// Deprecated
@mixin skeletonTextSizing($sizes...) {
	@each $size in $sizes {
		&.pr-u-text#{$size} {
			@if ($size == 'XS') {
				--components-skeleton-text-offset: 0.25rem;

				block-size: var(--pr-t-font-body-XS-lineHeight);
			}

			@if ($size == 'S') {
				--components-skeleton-text-offset: 0.375rem;

				block-size: var(--pr-t-font-body-S-lineHeight);
			}

			@if ($size == 'L') {
				--components-skeleton-text-offset: 0.375rem;
			}

			@if ($size == 'XL') {
				block-size: 1.75rem;
			}

			@if ($size == 'XXL') {
				--components-skeleton-text-offset: 0.5rem;

				block-size: 2rem;
			}
		}

		// Deprecated .u- utilities
		@if config.$deprecatedUtilityPrefix {
			&.u-text#{$size} {
				@if ($size == 'XS') {
					--components-skeleton-text-offset: 0.25rem;

					block-size: var(--pr-t-font-body-XS-lineHeight);
				}

				@if ($size == 'S') {
					--components-skeleton-text-offset: 0.375rem;

					block-size: var(--pr-t-font-body-S-lineHeight);
				}

				@if ($size == 'L') {
					--components-skeleton-text-offset: 0.375rem;
				}

				@if ($size == 'XL') {
					block-size: 1.75rem;
				}

				@if ($size == 'XXL') {
					--components-skeleton-text-offset: 0.5rem;

					block-size: 2rem;
				}
			}
		}
	}
}