@import '@/uni_modules/lime-style/index.scss';



$loading-color: create-var(loading-color, $primary-color);

$loading-size: create-var(loading-size, 40rpx);

$loading-text-color: create-var(loading-text-color, $text-color-3);

$loading-font-size: create-var(loading-font-size, $font-size);



/* #ifndef APP */

/* #ifndef MP-ALIPAY */

$loading-duration: var(--l-loading-duration, 2s);



@property --l-loading-start {

	syntax: '<length-percentage>';

	initial-value: 1%;

	inherits: false;

}

@property --l-loading-end {

	syntax: '<length-percentage>';

	initial-value: 1%;

	inherits: false;

}

@property --l-left {

	syntax: '<length-percentage>';

	initial-value: 1%;

	inherits: false;

}

@property --l-loadding-ball-size {

	syntax: '<length> | <length-percentage>';

	// initial-value: 1%;

	inherits: false;

}



/* #endif */

/* #ifdef MP-ALIPAY */

$loading-duration: var(--l-loading-duration, 1s);

/* #endif */





/* #endif */







.l-loading {

	display: flex;

	position: relative;

	flex-direction: row;

	align-items: center;

	// align-self: flex-start;

	

	/* #ifndef APP */

	color: $loading-color;

	&--ball{

		display: inline-flex;

		align-items: center;

		

		.l-loading {

			&__ball {

				position: relative;

				perspective: calc(var(--l-loadding-ball-size) * 4);

				transform-style: preserve-3d;

				// border: 1px solid;

				

				&:before{

					background-color: $primary-color;

					left: 0%;

					// mix-blend-mode: darken;

					animation-name: l-ball-before;

				}

				&:after{

					right: 0;

					background-color: red;

					// mix-blend-mode: darken;

					animation-name: l-ball-after;

				}

				&:before,&:after{

					top: 0;

					content: '';

					position: absolute;

					// width: 100%;

					height: 100%;

					aspect-ratio: 1/1;

					border-radius: 50%;

					animation-iteration-count: infinite;

					animation-delay: -100ms;

					animation-duration: 900ms;

					mix-blend-mode: darken;

				}

			}

		}

	}

	&--circular {

		.l-loading {

			&__circular {

				display: inline-block;

				position: relative;

				animation: l-rotate $loading-duration linear infinite;

				vertical-align: middle;

				&:before {

					content: '';

					display: block;

					width: 100%;

					height: 100%;

					border-radius: 50%;

					/* #ifndef MP-ALIPAY */

					background: conic-gradient(

						transparent 0%, 

						transparent var(--l-loading-start, 0%), var(--l-loading-color-1, currentColor) var(--l-loading-start, 0%), 

						var(--l-loading-color-2, currentColor) var(--l-loading-end, 0%), transparent var(--l-loading-end, 0%), 

						transparent 100%);

					/* #endif */

					/* #ifdef MP-ALIPAY */

					background: conic-gradient(

						var(--l-loading-color-1, transparent) 0%, 

						var(--l-loading-color-2, currentColor) 100%);

					/* #endif */

					mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);

					-webkit-mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);

					animation: l-circular 3s ease-in-out infinite;

					transform: rotate(90deg);

				}

			}

		}

	}

	&--spinner {

		.l-loading {

			&__spinner {

				position: relative;

				box-sizing: border-box;

				// width: 100%;

				// height: 100%;

				// max-width: 100%;

				// max-height: 100%;

				animation-timing-function: steps(12);

				animation: l-rotate 1.5s linear infinite;

			}

			&__dot {

				position: absolute;

				top: 0;

				left: 0;

				width: 100%;

				height: 100%;

				transform: rotate(calc(var(--l-loading-dot, 1) * 30deg));

				opacity: calc(var(--l-loading-dot, 1) / 12);

				&::before {

				  display: block;

				  width: 5rpx;

				  height: 25%;

				  margin: 0 auto;

				  background-color: currentColor;

				  border-radius: 40%;

				  content: ' ';

				}

			}

		}

	}

	/* #endif */

	/* #ifdef APP */

	&__view{

		// background-color: aqua;

		// background-color: #1677ff;

		// transition-duration: 1.5s;

		// transition-property: transform;

		// transition-timing-function: linear;

	}

	/* #endif */

	&__text {

		margin-left: $spacer-xs;

		color: $loading-text-color;

		font-size: $loading-font-size;

	}

	

	

	&.is-vertical {

		flex-direction: column;

		.l-loading__text {

			margin: $spacer-tn 0 0;

		}

	}

	&__ball,&__circular,&__spinner {

		width: $loading-size;

		height: $loading-size;

	}

}





/* #ifndef APP */

@keyframes l-circular {

	0% {

		--l-loading-start: 0%;

		--l-loading-end: 0%;

	}

	50% {

		--l-loading-start: 0%;

		--l-loading-end: 100%;

	}

	100% {

		--l-loading-start: 100%;

		--l-loading-end: 100%;

	}

}

@keyframes l-rotate {

	to {

		transform: rotate(1turn)

	}

}



@keyframes l-ball-before {

	0%{

		animation-timing-function: ease-in;

	}

	25% {

		animation-timing-function: ease-out;

		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);

		transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));

	}

	50% {

		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)));

		animation-timing-function:ease-in;

		transform: translate3d(var(--l-left), 0, 0);

	}

	75% {

		animation-timing-function: ease-out;

		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);

		transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));

	}

}

@keyframes l-ball-after {

	0%{

		animation-timing-function: ease-in;

	}

	25% {

		animation-timing-function: ease-out;

		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);

		transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));

	}

	50% {

		animation-timing-function:ease-in;

		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) * -1);

		transform: translate3d(var(--l-left), 0, 0);

	}

	75% {

		animation-timing-function: ease-out;

		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);

		transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));

	}

}

/* #endif */