<template>
		<div class="wcc-card-loader-container">
			<div class="wcc-card-loader">
				<div class="wcc-card-loader--line"></div>
				<div class="wcc-card-loader--line"></div>
				<div class="wcc-card-loader--line"></div>
				<div class="wcc-card-loader--line"></div>
				<div class="wcc-card-loader--line wcc-card-loader--rect"></div>
			</div>
		</div>
</template>
<script>
export default {
	name: "CardLoader",
};
</script>

<style lang="scss" scoped>
$rgb: rgb(90, 103, 216);

.wcc-card-loader--line {
	opacity: 0.5;
	background: #f6f7f8;
	background: linear-gradient(to right, #d7e1f2 8%, #c1d1eb 18%, #d7e1f2 33%);
	background-size: 800px 100px;
	border-radius: 3px;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: shimmer;
	animation-timing-function: linear;
}

.wcc-card-loader--line {
	height: 10px;
	width: 100%;
}
.wcc-card-loader--line:nth-child(1) {
	width: 70%;
	height: 15px;
}
.wcc-card-loader--line:nth-child(2) {
	width: 60%;
}
.wcc-card-loader--line:not(:first-child) {
	margin-top: 6px;
}
.wcc-card-loader--rect {
	min-height: 35px;
}
.wcc-loading {
	.wcc-card-loader-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: absolute;
		z-index: 12;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		padding: 15px;
		min-height: 114px;

		.wcc-card-loader {
			width: 100%;
		}
	}
}
@keyframes shimmer {
	0% {
		background-position: -400px 0;
	}
	100% {
		background-position: 400px 0;
	}
}
</style>