.loader
	.bubble
		.bubble__shine.bubble__shine--lg
		.bubble__shine.bubble__shine--sm
	p.text 
		| Lo
		span.text__highlight a
		| din
		span.text__highlight g

:root {
	// COLOR CSS VARIABLES
	--c_01: #ff1ead; // Pink
	--c_02: #000; // Black
	--c_03: #fff; // White

	// SIZE VARIABLES
	--size: 12vmin; // Resize loader by only editing this variable. With vmin unit, loader is automatically responsive.
	--loader_w: calc(var(--size) * 6);
	--loader_h: calc(var(--size) * 2.3);
	--bubble: calc(var(--size) * 1.5);
	--shine: calc(var(--size) / 5);
}

// MIXINS
@mixin size($w, $h: $w) {
	width: $w;
	height: $h;
}

// LAYOUT
body {
	background-color: var(--c_02);
}

.loader {
	@include size(var(--loader_w), var(--loader_h));
	display: flex;
	justify-content: center;
	position: relative;
	margin: calc(50vh - var(--loader_h)) auto 0;
}

.bubble {
	@include size(var(--bubble));
	animation: blow 1.6s linear alternate infinite;
	background-color: var(--c_01);
	border-radius: 50%;
	position: absolute;
	bottom: calc(var(--size) / 1.5);
	left: 50%;
	transform: scale(0.5) translateY(50%);
	outline: 1px solid transparent; // Fixes Chrome jagged edges

	&__shine {
		background-color: var(--c_03);
		position: absolute;

		&--lg {
			@include size(var(--shine), calc(var(--shine) * 2.5));
			border-radius: 100% 50% 40% 100% / 50% 30% 30% 100%;
			top: 2%;
			left: 26%;
			transform: rotateZ(60deg);
		}

		&--sm {
			@include size(calc(var(--shine) / 2));
			border-radius: 50% 50% 40% 100% / 50% 50% 50% 100%;
			top: 32%;
			left: 9%;
		}
	}
}

.text {
	align-self: flex-end;
	color: var(--c_01);
	font-family: "Major Mono Display", monospace;
	font-size: var(--size);
	margin: 0;
	text-transform: uppercase;

	&__highlight {
		color: var(--c_03);
	}
}

// ANIMATION
@keyframes blow {
	0% {
		transform: scale(0.5) translateY(50%);
	}
	20% {
		transform: scale(0.6) translateY(33%);
	}
	40% {
		transform: scale(0.7) translateY(21%);
	}
	60% {
		transform: scale(0.8) translateY(12%);
	}
	80% {
		transform: scale(0.9) translateY(5%);
	}
	93%, 100% {
		transform: scale(1) translateY(0) translateZ(0);
	}
}

/* 
 * PURE CSS BUBBLE GUM LOADER
 * Responsive simple loader for #CodePenChallenge Color Pop. 
 * Resizable loader with just 1 CSS edit.
 * By ilithya | 2019
 */