@import "~scss/_mixins";

.loaderWrapper { width: 24px; height: 24px; margin: 0px auto; position: relative; }
.loaderWrapper {
	@keyframes dots-light {
		0% { background-color: var(--color-text-primary); }
		32% { background-color: var(--color-text-primary); }
		100% { background-color: rgba(0,0,0,0); }
	}

	@keyframes dots-dark {
		0% { background-color: var(--color-bg-primary-inversion); }
		32% { background-color: var(--color-bg-primary-inversion); }
		100% { background-color: var(--color-bg-primary); }
	}

	@keyframes dots-accent {
		0% { background-color: var(--color-system-accent); }
		32% { background-color: var(--color-system-accent); }
		100% { background-color: var(--color-bg-primary); }
	}

	.loader {
		border: 2px solid var(--color-shape-secondary); border-radius: 100%; width: 24px; height: 24px; border-left: 2px solid var(--color-control-active); position: absolute; 
		left: 50%; top: 50%; margin: -12px 0px 0px -12px; transform: translateZ(0); animation: rotate 0.8s infinite linear;
	}

	.dots { display: inline-block; width: 28px; height: 4px; position: absolute; left: 50%; top: 50%; margin: -2px 0px 0px -14px; }
	.dots {
		.dot { 
			width: 4px; height: 4px; border-radius: 50%; animation: dots-light 0.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; 
			display: inline-block; vertical-align: top; background-color: rgba(0,0,0,0); margin-right: 8px; border: 1px solid var(--color-control-accent);
		}
		.dot:last-child { margin: 0px; }
        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }
	}
}

.loaderWrapper.inline { margin: 0px; display: inline-block; vertical-align: top; }
.loaderWrapper.inline {
	.loader { width: 20px; height: 20px; margin: -10px 0px 0px -10px; }
}

.loaderWrapper.c20 { width: 20px; height: 20px; }
.loaderWrapper.c26 { width: 26px; height: 26px; }
.loaderWrapper.c28 { width: 28px; height: 28px; }
.loaderWrapper.c32 { width: 32px; height: 32px; }