/**
 * element: div.page-host
 * toggle-class: "loading"
 */

/* COMMON */
@keyframes placeHolderShimmer{
	0%{
		background-position: -468px 0
	}
	100%{
		background-position: 468px 0
	}
}
.animated-background {
	animation-duration: 1.25s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	color: transparent;
	pointer-events: none;
	background: #F6F6F6;
	background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
	background-size: 800px 104px;
	//height: 96px;
	position: relative;
	& > *{
		visibility: hidden;
		&:after,
		&::-webkit-input-placeholder,
		&::-moz-placeholder,
		&:-ms-input-placeholder,
		&:-moz-placeholder{
			visibility:hidden;
			color:transparent;
		}
	}
	&:after,
	&::-webkit-input-placeholder,
	&::-moz-placeholder,
	&:-ms-input-placeholder,
	&:-moz-placeholder{
		visibility:hidden;
		color:transparent;
	}
}

/* Select what to animate for loading (and hide its contents) */
.loading{
	.person-section{
		.image-wrapper{
			@extend .animated-background;
		}
		.person-wrapper{
			h2,p{
				@extend .animated-background;
			}
		}
	}
	.personal-section{
		.nextofkin-section,
		.children-section,
		.form-group{
			& > label + *{
				@extend .animated-background;
			}
			&:after{
				color:transparent;
			}
		}
	}
	.nok_and_children_section{
		.nextofkin-section,
		.children-section{
			@extend .animated-background;
		}
	}
	.employment-section{
		@extend .animated-background;
	}
}