// Loading Animation

/// @deprecated as of v3.x with no replacement

$loading-icon-font-size: 2.5rem !default; // 40px

/// @deprecated as of v3.x with no replacement

$loading-icon-font-size-sm: map-get($font-scale, 4) !default; // 16px

// Loading Animation

$loading-animation: () !default;
$loading-animation: map-deep-merge(
	(
		display: block,
		height: 1em,
		margin-left: auto,
		margin-right: auto,
		overflow: hidden,
		position: relative,
		text-align: left,
		vertical-align: middle,
		width: 1em,
		before: (
			animation: loading-animation-circle 1s linear infinite,
			border-radius: 50%,
			box-shadow: -0.03125em -0.375em 0 0 currentColor,
			content: '',
			height: 0.25em,
			left: 50%,
			margin-left: -0.125em,
			margin-top: -0.125em,
			position: absolute,
			top: 50%,
			width: 0.25em,
		),
		after: (
			animation: loading-animation-circle 1s linear infinite,
			background-color: currentColor,
			border-radius: 50%,
			content: '',
			display: block,
			height: 1em,
			-webkit-mask: #{conic-gradient(transparent 10%, #000),
			linear-gradient(#000 0 0) content-box},
			-webkit-mask-composite: source-out,
			mask-composite: subtract,
			padding: 0.25em,
			width: 1em,
		),
	),
	$loading-animation
);

// .loading-animation-squares

$loading-animation-squares: () !default;
$loading-animation-squares: map-deep-merge(
	(
		display: block,
		height: 1em,
		margin-left: auto,
		margin-right: auto,
		position: relative,
		text-align: left,
		vertical-align: middle,
		width: 1em,
		before: (
			animation: loading-animation-squares-box-1 2.4s ease-in-out infinite,
			background-color: currentColor,
			border-radius: 0.2em,
			content: '',
			display: block,
			font-size: 0.3125em,
			height: 1em,
			left: 0,
			opacity: 0.4,
			position: absolute,
			top: 0,
			transform: scale(1),
			width: 1em,
		),
		after: (
			animation: loading-animation-squares-box-2 2.4s ease-in-out infinite,
			background-color: currentColor,
			border-radius: 0.2em,
			content: '',
			display: block,
			font-size: 0.3125em,
			height: 1em,
			left: calc(100% - 1.5em),
			opacity: 1,
			position: absolute,
			top: calc(100% - 1.5em),
			transform: scale(2),
			width: 1em,
		),
		'prefers-reduced-motion': (
			display: block,
			height: 1em,
			margin-left: auto,
			margin-right: auto,
			overflow: hidden,
			position: relative,
			text-align: left,
			vertical-align: middle,
			width: 1em,
			'&::before': (
				animation: loading-animation-circle 1s linear infinite,
				background-color: transparent,
				border-radius: 50%,
				box-shadow: -0.03125em -0.375em 0 0 currentColor,
				content: '',
				display: block,
				font-size: inherit,
				height: 0.25em,
				left: 50%,
				margin-left: -0.125em,
				margin-top: -0.125em,
				opacity: inherit,
				position: absolute,
				top: 50%,
				transform: none,
				width: 0.25em,
			),
			'&::after': (
				animation: loading-animation-circle 1s linear infinite,
				background-color: currentColor,
				border-radius: 50%,
				content: '',
				display: block,
				font-size: inherit,
				height: 1em,
				left: auto,
				-webkit-mask: #{conic-gradient(transparent 10%, #000),
				linear-gradient(#000 0 0) content-box},
				-webkit-mask-composite: source-out,
				mask-composite: subtract,
				padding: 0.25em,
				position: relative,
				top: auto,
				transform: none,
				width: 1em,
			),
		),
	),
	$loading-animation-squares
);

// Loading Animation Sizes

$loading-animation-sizes: () !default;
$loading-animation-sizes: map-deep-merge(
	(
		loading-animation-xs: (
			font-size: map-get($font-scale, 1),
		),
		loading-animation-sm: (
			font-size: $loading-icon-font-size-sm,
		),
		loading-animation-md: (
			font-size: 2rem,
		),
		loading-animation-lg: (
			font-size: 4rem,
		),
	),
	$loading-animation-sizes
);

// Loading Animation Variants

$loading-animation-light: () !default;
$loading-animation-light: map-deep-merge(
	(
		color: $white,
	),
	$loading-animation-light
);

$loading-animation-palette: () !default;
$loading-animation-palette: map-deep-merge(
	(
		loading-animation-primary: (
			color: $primary,
		),
		loading-animation-secondary: (
			color: $secondary,
		),
		loading-animation-light: $loading-animation-light,
	),
	$loading-animation-palette
);