
@layer bricks {
	.brx-loading-animation {
		--brx-loader-color: #9e9e9e;
		display: grid;
		height: 100%;
		max-height: inherit;
		min-height: inherit;
		place-content: center;
		position: relative;
		width: 100%;
	}
	
	.brx-loading-ellipsis {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-ellipsis div {
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
		background: var(--brx-loader-color);
		border-radius: 50%;
		height: 8px;
		position: absolute;
		top: 20px;
		width: 8px;
	}
	
	.brx-loading-ellipsis div:first-child {
		animation: brx-loading-ellipsis1 .6s infinite;
		left: 5px;
	}
	
	.brx-loading-ellipsis div:nth-child(2) {
		animation: brx-loading-ellipsis2 .6s infinite;
		left: 5px;
	}
	
	.brx-loading-ellipsis div:nth-child(3) {
		animation: brx-loading-ellipsis2 .6s infinite;
		left: 19px;
	}
	
	.brx-loading-ellipsis div:nth-child(4) {
		animation: brx-loading-ellipsis3 .6s infinite;
		left: 34px;
	}
	
	@keyframes brx-loading-ellipsis1 {
		0% {
			transform: scale(0);
		}
		
		to {
			transform: scale(1);
		}
	}
	
	@keyframes brx-loading-ellipsis3 {
		0% {
			transform: scale(1);
		}
		
		to {
			transform: scale(0);
		}
	}
	
	@keyframes brx-loading-ellipsis2 {
		0% {
			transform: translate(0);
		}
		
		to {
			transform: translate(15px);
		}
	}
	
	.brx-loading-dual-ring {
		display: inline-block;
		height: 48px;
		width: 48px;
	}
	
	.brx-loading-dual-ring:after {
		animation: brx-loading-dual-ring 1.2s linear infinite;
		border: 4px solid var(--brx-loader-color);
		border-color: var(--brx-loader-color) transparent var(--brx-loader-color) transparent;
		border-radius: 50%;
		content: " ";
		display: block;
		height: 39px;
		margin: 5px;
		width: 39px;
	}
	
	@keyframes brx-loading-dual-ring {
		0% {
			transform: rotate(0deg);
		}
		
		to {
			transform: rotate(1turn);
		}
	}
	
	.brx-loading-facebook {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-facebook div {
		animation: brx-loading-facebook 1.2s cubic-bezier(0, .5, .5, 1) infinite;
		background: var(--brx-loader-color);
		display: inline-block;
		left: 5px;
		position: absolute;
		width: 10px;
	}
	
	.brx-loading-facebook div:first-child {
		animation-delay: -.24s;
		left: 5px;
	}
	
	.brx-loading-facebook div:nth-child(2) {
		animation-delay: -.12s;
		left: 19px;
	}
	
	.brx-loading-facebook div:nth-child(3) {
		animation-delay: 0;
		left: 34px;
	}
	
	@keyframes brx-loading-facebook {
		0% {
			height: 38px;
			top: 5px;
		}
		
		50%, to {
			height: 19px;
			top: 15px;
		}
	}
	
	.brx-loading-ring {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-ring div {
		animation: brx-loading-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
		border: 5px solid var(--brx-loader-color);
		border-color: var(--brx-loader-color) transparent transparent transparent;
		border-radius: 50%;
		box-sizing: border-box;
		display: block;
		height: 38px;
		margin: 5px;
		position: absolute;
		width: 38px;
	}
	
	.brx-loading-ring div:first-child {
		animation-delay: -.45s;
	}
	
	.brx-loading-ring div:nth-child(2) {
		animation-delay: -.3s;
	}
	
	.brx-loading-ring div:nth-child(3) {
		animation-delay: -.15s;
	}
	
	@keyframes brx-loading-ring {
		0% {
			transform: rotate(0deg);
		}
		
		to {
			transform: rotate(1turn);
		}
	}
	
	.brx-loading-roller {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-roller div {
		animation: brx-loading-roller 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
		transform-origin: 24px 24px;
	}
	
	.brx-loading-roller div:after {
		background: var(--brx-loader-color);
		border-radius: 50%;
		content: " ";
		display: block;
		height: 4px;
		margin: -2px 0 0 -2px;
		position: absolute;
		width: 4px;
	}
	
	.brx-loading-roller div:first-child {
		animation-delay: -36ms;
	}
	
	.brx-loading-roller div:first-child:after {
		left: 38px;
		top: 38px;
	}
	
	.brx-loading-roller div:nth-child(2) {
		animation-delay: -72ms;
	}
	
	.brx-loading-roller div:nth-child(2):after {
		left: 34px;
		top: 41px;
	}
	
	.brx-loading-roller div:nth-child(3) {
		animation-delay: -.108s;
	}
	
	.brx-loading-roller div:nth-child(3):after {
		left: 29px;
		top: 43px;
	}
	
	.brx-loading-roller div:nth-child(4) {
		animation-delay: -.144s;
	}
	
	.brx-loading-roller div:nth-child(4):after {
		left: 24px;
		top: 43px;
	}
	
	.brx-loading-roller div:nth-child(5) {
		animation-delay: -.18s;
	}
	
	.brx-loading-roller div:nth-child(5):after {
		left: 19px;
		top: 43px;
	}
	
	.brx-loading-roller div:nth-child(6) {
		animation-delay: -.216s;
	}
	
	.brx-loading-roller div:nth-child(6):after {
		left: 14px;
		top: 41px;
	}
	
	.brx-loading-roller div:nth-child(7) {
		animation-delay: -.252s;
	}
	
	.brx-loading-roller div:nth-child(7):after {
		left: 10px;
		top: 38px;
	}
	
	.brx-loading-roller div:nth-child(8) {
		animation-delay: -.288s;
	}
	
	.brx-loading-roller div:nth-child(8):after {
		left: 7px;
		top: 34px;
	}
	
	@keyframes brx-loading-roller {
		0% {
			transform: rotate(0deg);
		}
		
		to {
			transform: rotate(1turn);
		}
	}
	
	.brx-loading-default {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-default div {
		animation: brx-loading-default 1.2s linear infinite;
		background: var(--brx-loader-color);
		border-radius: 50%;
		height: 4px;
		position: absolute;
		width: 4px;
	}
	
	.brx-loading-default div:first-child {
		animation-delay: 0s;
		left: 39px;
		top: 22px;
	}
	
	.brx-loading-default div:nth-child(2) {
		animation-delay: -.1s;
		left: 37px;
		top: 13px;
	}
	
	.brx-loading-default div:nth-child(3) {
		animation-delay: -.2s;
		left: 31px;
		top: 7px;
	}
	
	.brx-loading-default div:nth-child(4) {
		animation-delay: -.3s;
		left: 22px;
		top: 4px;
	}
	
	.brx-loading-default div:nth-child(5) {
		animation-delay: -.4s;
		left: 13px;
		top: 7px;
	}
	
	.brx-loading-default div:nth-child(6) {
		animation-delay: -.5s;
		left: 7px;
		top: 13px;
	}
	
	.brx-loading-default div:nth-child(7) {
		animation-delay: -.6s;
		left: 4px;
		top: 22px;
	}
	
	.brx-loading-default div:nth-child(8) {
		animation-delay: -.7s;
		left: 7px;
		top: 31px;
	}
	
	.brx-loading-default div:nth-child(9) {
		animation-delay: -.8s;
		left: 13px;
		top: 37px;
	}
	
	.brx-loading-default div:nth-child(10) {
		animation-delay: -.9s;
		left: 22px;
		top: 40px;
	}
	
	.brx-loading-default div:nth-child(11) {
		animation-delay: -1s;
		left: 31px;
		top: 37px;
	}
	
	.brx-loading-default div:nth-child(12) {
		animation-delay: -1.1s;
		left: 37px;
		top: 31px;
	}
	
	@keyframes brx-loading-default {
		0%, 20%, 80%, to {
			transform: scale(1);
		}
		
		50% {
			transform: scale(1.5);
		}
	}
	
	.brx-loading-ripple {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-ripple div {
		animation: brx-loading-ripple 1s cubic-bezier(0, .2, .8, 1) infinite;
		border: 3px solid var(--brx-loader-color);
		border-radius: 50%;
		opacity: 1;
		position: absolute;
	}
	
	.brx-loading-ripple div:nth-child(2) {
		animation-delay: -.5s;
	}
	
	@keyframes brx-loading-ripple {
		0% {
			height: 0;
			left: 22px;
			opacity: 1;
			top: 22px;
			width: 0;
		}
		
		to {
			height: 44px;
			left: -1px;
			opacity: 0;
			top: -1px;
			width: 44px;
		}
	}
	
	.brx-loading-spinner {
		display: inline-block;
		height: 48px;
		position: relative;
		width: 48px;
	}
	
	.brx-loading-spinner div {
		animation: brx-loading-spinner 1.2s linear infinite;
		transform-origin: 24px 24px;
	}
	
	.brx-loading-spinner div:after {
		background: var(--brx-loader-color);
		border-radius: 20%;
		content: " ";
		display: block;
		height: 11px;
		left: 22px;
		position: absolute;
		top: 2px;
		width: 4px;
	}
	
	.brx-loading-spinner div:first-child {
		animation-delay: -1.1s;
		transform: rotate(0deg);
	}
	
	.brx-loading-spinner div:nth-child(2) {
		animation-delay: -1s;
		transform: rotate(30deg);
	}
	
	.brx-loading-spinner div:nth-child(3) {
		animation-delay: -.9s;
		transform: rotate(60deg);
	}
	
	.brx-loading-spinner div:nth-child(4) {
		animation-delay: -.8s;
		transform: rotate(90deg);
	}
	
	.brx-loading-spinner div:nth-child(5) {
		animation-delay: -.7s;
		transform: rotate(120deg);
	}
	
	.brx-loading-spinner div:nth-child(6) {
		animation-delay: -.6s;
		transform: rotate(150deg);
	}
	
	.brx-loading-spinner div:nth-child(7) {
		animation-delay: -.5s;
		transform: rotate(180deg);
	}
	
	.brx-loading-spinner div:nth-child(8) {
		animation-delay: -.4s;
		transform: rotate(210deg);
	}
	
	.brx-loading-spinner div:nth-child(9) {
		animation-delay: -.3s;
		transform: rotate(240deg);
	}
	
	.brx-loading-spinner div:nth-child(10) {
		animation-delay: -.2s;
		transform: rotate(270deg);
	}
	
	.brx-loading-spinner div:nth-child(11) {
		animation-delay: -.1s;
		transform: rotate(300deg);
	}
	
	.brx-loading-spinner div:nth-child(12) {
		animation-delay: 0s;
		transform: rotate(330deg);
	}
	
	@keyframes brx-loading-spinner {
		0% {
			opacity: 1;
		}
		
		to {
			opacity: 0;
		}
	}
}
