@use '../../theming' as *;

/// @access private
@mixin daff-skeleton-theme($theme) {
	$neutral: daff-get-palette($theme, neutral);
	$base: daff-get-base-color($theme, base);
	$mode: daff-get-theme-mode($theme);

	.daff-skeleton {
		@include light($mode) {
			&::before,
			::before {
				background: daff-color($neutral, 20);
			}
		}

		@include dark($mode) {
			&::before,
			::before {
				background: daff-color($neutral, 90);
			}
		}
	}
}

/// Creates a skeleton screen placeholder with a shimmering loading effect.
///
/// @group State
///
/// @param {Number} $width — The width of the skeleton element.
/// @param {Number} $height — The width of the skeleton element.
/// @param {Number} $border-radius — Optional border radius for rounded UI. Defaults to 0.
///
///	@example scss
/// 	@include skeleton-screen(10rem, 2rem, 0.25rem);
///
@mixin skeleton-screen($width, $height, $border-radius: 0) {
	display: flex;
	position: relative;
	height: $height;
	width: $width;
	border-radius: $border-radius;

	&::before {
		animation-name: loading;
		animation-duration: 1000ms;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		content: '';
		height: $height;
		width: $width;
		position: absolute;
		top: 0;
		left: 0;
	}

	@keyframes loading {
		from {
			opacity: 0.5;
		}
		to {
			opacity: 1;
		}
	}
}