@import "mixins/mixins";
@import "common/var";

@include b(spin) {
	color: #2d8cf0;
	vertical-align: middle;
	text-align: center;
	@include e(dot) {
		position: relative;
		display: block;
		border-radius: 50%;
		background-color: #2d8cf0;
		width: 20px;
		height: 20px;
		-webkit-animation: ani-spin-bounce 1s 0s ease-in-out infinite;
		animation: ani-spin-bounce 1s 0s ease-in-out infinite;
	}
	@include e(text) {
		display: none;
	}
	@include m(fix) {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, .9);
		.kc-spin__main {
			position: absolute;
			top: 50%;
			left: 50%;
			-ms-transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		.kc-spin__dot {
			display: inline-block;
		}
	}
	@include m(large) {
		.kc-spin__dot {
			width: 32px;
			height: 32px;
		}
	}
	@include m(small) {
		.kc-spin__dot {
			width: 12px;
			height: 12px;
		}
	}
	@include m(fullscreen) {
		z-index: 2010;
	}
	@include m(show-text) {
		.kc-spin__dot {
			display: none;
		}
		.kc-spin__text {
			display: block;
		}
	}
}
@include b(spin-fullscreen) {
	z-index: 2010;
	@include e(wrapper) {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
.kc-table-wrapper {
	& > .kc-spin--fix {
		border: 1px solid #dddee1;
		border-top: 0;
		border-left: 0;
	}
}
@-webkit-keyframes ani-spin-bounce {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}

@keyframes ani-spin-bounce {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}