//  =================
//      Imports
//  =================

@import '../../../assets/base/color_variables';    // Color Variables
@import '../../../assets/base/fonticons';              // Fonticons Variables
@import '../../../assets/base/urls';                   // URLS Variables
@import '../../../assets/base/utilities_variables';  // Utilities Variables

@keyframes "loading" {
	0% {
		max-height: 0;
	}
	50% {
		max-height: 100%;
		top: 0;
	}
	100% {
		max-height: 0;
		top: 120%;
	}
}
@-webkit-keyframes "loading" {
	0% {
		max-height: 0;
	}
	50% {
		max-height: 100%;
		top: 0;
	}
	100% {
		max-height: 0;
		top: 120%;
	}
}

@-webkit-keyframes "ply-ok-loading" {
	to {
		background-position: 60px;
	}
}
@-moz-keyframes "ply-ok-loading" {
	to {
		background-position: 60px;
	}
}
@keyframes "ply-ok-loading" {
	to {
		background-position: 60px;
	}
}
/* Global loading */
.ply-global-loading {
	top: 50%;
	left: 50%;
	padding: $p-30;
	width: 60px;
	height: 60px;
	margin: -100px 0 0 -60px;
	z-index: 100000;
	position: $pos-fix;
	border-radius: 10%;
	background-color: $color_596;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ply-loading-spinner {
	width: 100%;
	height: 100%;
	opacity: .9;
	background: $white;
	border-radius: 100%;
	overflow: hidden;
	position: $pos-rel;
	box-shadow: 0 1px 3px rgba(0,0,0,.6);
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: $pos-abs;
		top: 0;
		left: 0;
		background: #333;
		max-height: 0;
		-webkit-animation: loading 3s normal infinite;
		animation: loading 3s normal infinite;
	}
}

/* Layer */
.ply-layer {
	color: $color_43;
	min-width: 280px;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	background-color: $white;
	border-radius: 2px;
	font-size: 16px;
	font-family: $font_family_9;
}
.ply-layer.alert {
	.ply-content {
		padding: $p-20 0 15px;
		text-align: $align-center;
	}
	.ply-footer {
		margin-top: $m-20;
		text-align: $align-center;
	}
}
.ply-layer.confirm {
	.ply-content {
		padding: $p-20 0 15px;
		text-align: $align-center;
	}
	.ply-footer {
		margin-top: $m-20;
		text-align: $align-center;
	}
}
.ply-layer.base {
	.ply-footer {
		margin-top: $m-20;
		text-align: $align-center;
	}
}
.ply-layer.prompt {
	.ply-footer {
		margin-top: $m-20;
		text-align: $align-center;
	}
}
.ply-inside {
	padding: $p-20;
}
.ply-header {
	margin: -20px -20px 20px;
	padding: 10px $p-20;
	font-size: 18px;
	background-color: $color_6;
	border-radius: 2px 2px 0 0;
	color: $color_56;
}
.ply-footer {
	.ply-ctrl {
		margin-left: $m-20;
		&:first-child {
			margin-left: 0;
		}
	}
}
/* Controls */
.ply-x {
	top: 12px;
	right: 5px;
	cursor: pointer;
	padding: 5px;
	z-index: 1000;
	position: $pos-abs;
	font-size: 20px;
	line-height: 0;
}
.ply-ok {
	color: $white;
	cursor: pointer;
	border: 0;
	outline: 0;
	padding: 5px $p-20;
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	background-color: $color_594;
	border-radius: 30px;
	font-size: 18px;
	width: 100px;
	&:focus {
		box-shadow: 0 0 1px 2px rgba(255, 180, 0, .6);
		border: $b-width-2 $solid rgb(255, 210, 102)\9;
	}
	&::-moz-focus-inner {
		border: 0;
	}
}
.ply-cancel {
	color: $white;
	cursor: pointer;
	border: 0;
	outline: 0;
	padding: 5px $p-20;
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	background-color: $color_594;
	border-radius: 30px;
	font-size: 18px;
	background-color: $color_56;
	&:focus {
		box-shadow: 0 0 1px 2px rgba(255, 180, 0, .6);
		border: $b-width-2 $solid rgb(255, 210, 102)\9;
	}
	&::-moz-focus-inner {
		border: 0;
	}
}
/* Forms */
.ply-input {
	width: 100%;
	border: $b-width-1 $solid $light-gray;
	border-radius: 2px;
	color: $additional-color-11;
	outline: 0;
	padding: $p-5 $p-10;
	margin-top: 15px;
	font-size: 16px;
	font-family: $font_family_9;
	box-sizing: border-box;
	&:first-child {
		margin-top: 0;
	}
	&:focus {
		border-color: $additional-color-5;
	}
}

/* Global modifiers */
.ply-invalid {
	.ply-input {
		border-color: $color_18;
	}
}
.ply-loading {
	&:before {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		content: '';
		position: $pos-abs;
	}
	.ply-ok {
		color: $color_595;
		-webkit-animation: ply-ok-loading 1s linear infinite;
		-moz-animation: ply-ok-loading 1s linear infinite;
		animation: ply-ok-loading 1s linear infinite;
		-webkit-background-size: 30px 30px;
		-moz-background-size: 30px 30px;
		background-size: 30px 30px;
		background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
		background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
		background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
		background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
		background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
		background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	}
}