/**
  * The MIT License (MIT)
  *
  * Copyright (c) 2017 David Hu
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
  * in the Software without restriction, including without limitation the rights
  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the Software is
  * furnished to do so, subject to the following conditions:
  *
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
  *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */

@keyframes bt-loader-kf {
	50% {
		transform: scale(0.75);
		opacity: 0.2;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@mixin bt-loader-dot($i) {
	display: inline-block;
	background-color: #579eff;
	width: 15px;
	height: 15px;
	margin: 2px;
	border-radius: 100%;
	animation: 0.7s if($i % 2 == 0, 0s, 0.35s) infinite linear bt-loader-kf;
	animation-fill-mode: both;
}

.bt-loader-wrapper,
.viewport-app > div.bt-loader-wrapper {
	&.bt-loader--fill {
		height: calc(100vh - 58px);
		flex: 1 0 auto;
	}

	&.bt-loader--error {
		p {
			font-size: 1.5rem;
		}
	}

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	p {
		margin-top: 1rem;
		font-size: 18px;
		color: $bt-light-text;
	}
}

.bt-loader {
	display: flex;
	align-items: center;
	justify-content: center;

	@for $i from 0 to 3 {
		> :nth-child(#{$i + 1}) {
			@include bt-loader-dot($i);
		}
	}
}
