//	                     /$$                                                 /$$         /$$
//	                    |__/                                                | $$        | $$
//	  /$$$$$$$  /$$$$$$  /$$ /$$$$$$$  /$$$$$$$   /$$$$$$   /$$$$$$         | $$$$$$$  /$$$$$$   /$$$$$$$
//	 /$$_____/ /$$__  $$| $$| $$__  $$| $$__  $$ /$$__  $$ /$$__  $$ /$$$$$$| $$__  $$|_  $$_/  | $$__  $$
//	|  $$$$$$ | $$  \ $$| $$| $$  \ $$| $$  \ $$| $$$$$$$$| $$  \__/|______/| $$  \ $$  | $$    | $$  \ $$
//	 \____  $$| $$  | $$| $$| $$  | $$| $$  | $$| $$_____/| $$              | $$  | $$  | $$ /$$| $$  | $$
//	 /$$$$$$$/| $$$$$$$/| $$| $$  | $$| $$  | $$|  $$$$$$$| $$              | $$$$$$$/  |  $$$$/| $$  | $$
//	|_______/ | $$____/ |__/|__/  |__/|__/  |__/ \_______/|__/              |_______/    \___/  |__/  |__/
//	          | $$
//	          | $$
//	          |__/
.spinner-btn {
	--spinner-dot-color: var(--white);

	> .text { display: block; }

	> .dots {
		align-items: center;
		display: none;
		height: 19px;
		margin: 0 auto;
		width: 70px;

		> span {
			animation: spinner 1.4s infinite ease-in-out both;
			background-color: var(--spinner-dot-color);
			border-radius: 100%;
			display: inline-block;
			height: 18px;
			width: 18px;
		}

		> .dot1 { animation-delay: -.32s; }
		> .dot2 { animation-delay: -.16s; }
	}

	&.-active {
		> .text { display: none; }
		> .dots { display: flex; }
	}

	&.-dark {
		--spinner-dot-color: var(--black);
	}
}