@import "../variables";
@import "../globals";

.spinner.bubble {
	border-radius: 50%;
	@include display-box($spinner-size / 2);
	background: $spinner-color;
	animation: bubble-animate $speed3x linear infinite;

	&::before {
		border-radius: 50%;
		content: " ";
		@include display-box($spinner-size / 2);
		background: $spinner-color;
		position: absolute;
		left: -($spinner-size / 8 * 5);
		animation: bubble-animate-before $speed3x ease-in-out infinite;
	}

	&::after {
		border-radius: 50%;
		content: " ";
		@include display-box($spinner-size / 2);
		background: $spinner-color;
		position: absolute;
		right: -($spinner-size / 8 * 5);
		animation: bubble-animate-after $speed3x ease-in-out infinite;
	}
}

@keyframes bubble-animate {
	0% {
		opacity: .5;
		transform: scale(1) translateX(0px);
	}

	25% {
		opacity: 1;
		transform: scale(1.1) translateX(-15px);
	}

	50% {
		opacity: 1;
		transform: scale(1.2) translateX(15px);
	}

	100% {
		opacity: .5;
		transform: scale(1) translateX(0px);
	}
}

@keyframes bubble-animate-before {
	0% {
		opacity: .5;
		transform: scale(1);
	}

	25% {
		transform: scale(1.1);
	}

	50%, 100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bubble-animate-after {
	0%, 50% {
		opacity: .5;
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	75%, 100% {
		opacity: 1;
		transform: scale(1);
	}
}