// ==========================================================================
// Animation Library Specific to Material Stuff
// ==========================================================================

// == Working Animation
// To be applied on the input field only
.#{$selector} {
	.working {
		position: relative;
		overflow: hidden;

		&::before,
		&::after {
			display: block;
			position: absolute;
			height: 1px;
			left: 0;
			width: 100%;
			content: "";
			bottom: 0;
		}
		&.has-icon {
			&::before,
			&::after {
				width: calc(100% - 3em);
				margin-left: 3em;
			}
		}
		&::before {
			background-color: $disabled-color-text;
		}
		&::after {
			background-color: $primary-color;
			width: 30%;
			-webkit-animation: eFormMaterialWorking 2s linear infinite;
			        animation: eFormMaterialWorking 2s linear infinite;
		}
	}
}

@-webkit-keyframes eFormMaterialWorking {
	from {
		width: 0%;
		right: 0;
		left: 0;
	}
	50% {
		width: 30%;
		right: auto;
	}
	70% {
		width: 70%;
		left: 30%;
		right: 0;
	}
	80% {
		width: 30%;
		left: 70%;
		right: 0;
	}
	95% {
		width: 10%;
		left: 90%;
	}
	to {
		left: 100%;
		width: 0;
		right: 0;
	}
}

@keyframes eFormMaterialWorking {
	from {
		width: 0%;
		right: 0;
		left: 0;
	}
	50% {
		width: 30%;
		right: auto;
	}
	70% {
		width: 70%;
		left: 30%;
		right: 0;
	}
	80% {
		width: 30%;
		left: 70%;
		right: 0;
	}
	95% {
		width: 10%;
		left: 90%;
	}
	to {
		left: 100%;
		width: 0;
		right: 0;
	}
}