/* ------------------------------------------------------------------------------
 *
 *  # Sweet alerts
 *
 *  Styles for sweet_alert.min.js - A beautiful replacement for JavaScript's "Alert"
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */


/* # Core
-------------------------------------------------- */

	// Overlay
	.sweet-overlay {
		background-color: fade(#000, 40%);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: none;
		z-index: @zindex-modal;
	}

	// Alert itself
	.sweet-alert {
		background-color: #fff;
		width: 470px;
		padding: @panel-body-padding;
		border-radius: @border-radius-base;
		text-align: center;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -235px;
		margin-top: -200px;
		overflow: hidden;
		display: none;
		z-index: @zindex-modal + 10;

		// Heading
		h2 {
			text-align: center;
			display: block;
			position: relative;
		}

		// Paragraph
		p {
			text-align: center;
			position: relative;
		}

		// Buttons
		button {
			background-color: @brand-primary;
			color: #fff;
			border: 0;
			border-radius: @border-radius-base;
			padding: @padding-base-vertical @padding-base-horizontal;
			margin: (@line-height-computed / 2) 5px 0 5px;
			box-shadow: none!important;

			&:hover {
				background-color: @color-primary-600;
			}
			&:focus {
				outline: 0;
			}
			&:active {
				background-color: @color-primary-400;
			}
			&.cancel {
				background-color: transparent;
				color: @text-color;
			}
		}

		// Icons
		.icon {
			width: 80px;
			height: 80px;
			border: 4px solid #ddd;
			border-radius: 50%;
			margin: (@line-height-computed / 2) auto @line-height-computed auto;
			padding: 0;
			position: relative;
			.box-sizing(content-box);

		  	// Error
			&.error {
				border-color: @brand-danger;

				.x-mark {
					position: relative;
					display: block;
				}
				.line {
					position: absolute;
					height: 5px;
					width: 47px;
					background-color: @brand-danger;
					display: block;
					top: 37px;
					border-radius: @border-radius-small;

					&.left {
						left: 17px;
						.rotate(45deg);
					}
					&.right {
						right: 16px;
						.rotate(-45deg);
					}
				}
			}

			// Success
			&.success {
				border-color: @brand-success;

				&:before,
				&:after {
					content: '';
					border-radius: 50%;
					position: absolute;
					width: 60px;
					height: 120px;
					background-color: #fff;
					.rotate(45deg);
				}
				&:before {
					border-radius: 120px 0 0 120px;
					top: -7px;
					left: -33px;
					.rotate(-45deg);
					.transform-origin(60px 60px)
				}
				&:after {
					border-radius: 0 120px 120px 0;
					top: -11px;
					left: 30px;
					.rotate(-45deg);
					.transform-origin(0 60px)
				}

				.placeholder {
					width: 80px;
					height: 80px;
					border: 4px solid fade(@brand-success, 20%);
					border-radius: 50%;
					position: absolute;
					left: -4px;
					top: -4px;
					z-index: 2;
					.box-sizing(content-box);
				}

				.fix {
					width: 5px;
					height: 90px;
					background-color: #fff;
					position: absolute;
					left: 28px;
					top: 8px;
					z-index: 1;
					.rotate(-45deg);
				}

				.line {
					height: 5px;
					background-color: @brand-success;
					display: block;
					border-radius: @border-radius-small;
					position: absolute;
					z-index: 2;

					&.tip {
						width: 25px;
						left: 14px;
						top: 46px;
						.rotate(45deg);
					}

					&.long {
						width: 47px;
						right: 8px;
						top: 38px;
						.rotate(-45deg);
					}
				}
			}

			// Warning
			&.warning {
				border-color: @brand-warning;

				.body {
					position: absolute;
					width: 5px;
					height: 47px;
					left: 50%;
					top: 10px;
					border-radius: @border-radius-small;
					margin-left: -2px;
					background-color: @brand-warning;
				}
				.dot {
					position: absolute;
					width: 7px;
					height: 7px;
					border-radius: 50%;
					margin-left: -3px;
					left: 50%;
					bottom: 10px;
					background-color: @brand-warning;
				}
			}

			// Info
			&.info {
				border-color: @brand-primary;

				&:before {
					content: "";
					position: absolute;
					width: 5px;
					height: 29px;
					left: 50%;
					bottom: 17px;
					border-radius: 2px;
					margin-left: -2px;
					background-color: @brand-primary;
				}

				&:after {
					content: "";
					position: absolute;
					width: 7px;
					height: 7px;
					border-radius: 50%;
					margin-left: -3px;
					top: 19px;
					background-color: @brand-primary;
				}
			}

			// Custom icon
			&.custom {
				background-size: contain;
				border-radius: 0;
				border: 0;
				background-position: center center;
				background-repeat: no-repeat;
			}
		}


		// Media queries
		@media (max-width: @screen-xs) {
		    width: auto;
		    margin-left: 0;
		    margin-right: 0;
		    left: @grid-gutter-width;
		    right: @grid-gutter-width;
		}
	}


/* # Animations
-------------------------------------------------- */

	// Show/Hide animations
	// ----------------------------------------

	// Show
	@-webkit-keyframes showSweetAlert {
		0% {
			.scale(0.7);
		}
		45% {
			.scale(1.05);
		}
		80% {
			.scale(0.95);
		}
		100% {
			.scale(1);
		}
	}
	@-moz-keyframes showSweetAlert {
		0% {
			.scale(0.7);
		}
		45% {
			.scale(1.05);
		}
		80% {
			.scale(0.95);
		}
		100% {
			.scale(1);
		}
	}
	@keyframes showSweetAlert {
		0% {
			.scale(0.7);
		}
		45% {
			.scale(1.05);
		}
		80% {
			.scale(0.95);
		}
		100% {
			.scale(1);
		}
	}
	.showSweetAlert {
		-webkit-animation: showSweetAlert 0.3s;
		-moz-animation: showSweetAlert 0.3s;
		animation: showSweetAlert 0.3s;
	}

	// Hide
	@-webkit-keyframes hideSweetAlert {
		0% {
			.scale(1);
		}
		100% {
			.scale(0.5);
		}
	}
	@-moz-keyframes hideSweetAlert {
		0% {
			.scale(1);
		}
		100% {
			.scale(0.5);
		}
	}
	@keyframes hideSweetAlert {
		0% {
			.scale(1);
		}
		100% {
			.scale(0.5);
		}
	}
	.hideSweetAlert {
		-webkit-animation: hideSweetAlert 0.2s;
		-moz-animation: hideSweetAlert 0.2s;
		animation: hideSweetAlert 0.2s;
	}


	// Success
	// ----------------------------------------

	// Success tip
	@-webkit-keyframes animateSuccessTip {
		0% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		54% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		70% {
			width: 50px;
			left: -8px;
			top: 37px;
		}
		84% {
			width: 17px;
			left: 21px;
			top: 48px;
		}
		100% {
			width: 25px;
			left: 14px;
			top: 45px;
		}
	}
	@-moz-keyframes animateSuccessTip {
		0% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		54% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		70% {
			width: 50px;
			left: -8px;
			top: 37px;
		}
		84% {
			width: 17px;
			left: 21px;
			top: 48px;
		}
		100% {
			width: 25px;
			left: 14px;
			top: 45px;
		}
	}
	@keyframes animateSuccessTip {
		0% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		54% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		70% {
			width: 50px;
			left: -8px;
			top: 37px;
		}
		84% {
			width: 17px;
			left: 21px;
			top: 48px;
		}
		100% {
			width: 25px;
			left: 14px;
			top: 45px;
		}
	}
	.animateSuccessTip {
		-webkit-animation: animateSuccessTip 0.75s;
		-moz-animation: animateSuccessTip 0.75s;
		animation: animateSuccessTip 0.75s;
	}

	// Success line
	@-webkit-keyframes animateSuccessLong {
		0% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		65% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		84% {
			width: 55px;
			right: 0px;
			top: 35px;
		}
		100% {
			width: 47px;
			right: 8px;
			top: 38px;
		}
	}
	@-moz-keyframes animateSuccessLong {
		0% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		65% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		84% {
			width: 55px;
			right: 0px;
			top: 35px;
		}
		100% {
			width: 47px;
			right: 8px;
			top: 38px;
		}
	}
	@keyframes animateSuccessLong {
		0% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		65% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		84% {
			width: 55px;
			right: 0px;
			top: 35px;
		}
		100% {
			width: 47px;
			right: 8px;
			top: 38px;
		}
	}
	.animateSuccessLong {
		-webkit-animation: animateSuccessLong 0.75s;
		-moz-animation: animateSuccessLong 0.75s;
		animation: animateSuccessLong 0.75s;
	}

	// Rotate placeholder
	@-webkit-keyframes rotatePlaceholder {
		0% {
			.rotate(-45deg);
		}
		5% {
			.rotate(-45deg);
		}
		12% {
			.rotate(-405deg);
		}
		100% {
			.rotate(-405deg);
		}
	}
	@-moz-keyframes rotatePlaceholder {
		0% {
			.rotate(-45deg);
		}
		5% {
			.rotate(-45deg);
		}
		12% {
			.rotate(-405deg);
		}
		100% {
			.rotate(-405deg);
		}
	}
	@keyframes rotatePlaceholder {
		0% {
			.rotate(-45deg);
		}
		5% {
			.rotate(-45deg);
		}
		12% {
			.rotate(-405deg);
		}
		100% {
			.rotate(-405deg);
		}
	}
	.icon.success.animate::after {
		-webkit-animation: rotatePlaceholder 4.25s ease-in;
		-moz-animation: rotatePlaceholder 4.25s ease-in;
		animation: rotatePlaceholder 4.25s ease-in;
	}


	// Error
	// ----------------------------------------

	// Icon
	@-webkit-keyframes animateErrorIcon {
		0% {
			.rotateX(100deg);
			.opacity(0);
		}
		100% {
			.rotateX(0deg);
			.opacity(1);
		}
	}
	@-moz-keyframes animateErrorIcon {
		0% {
			.rotateX(100deg);
			.opacity(0);
		}
		100% {
			.rotateX(0deg);
			.opacity(1);
		}
	}
	@keyframes animateErrorIcon {
		0% {
			.rotateX(100deg);
			.opacity(0);
		}
		100% {
			.rotateX(0deg);
			.opacity(1);
		}
	}
	.animateErrorIcon {
		-webkit-animation: animateErrorIcon 0.5s;
		-moz-animation: animateErrorIcon 0.5s;
		animation: animateErrorIcon 0.5s;
	}

	// X mark
	@-webkit-keyframes animateXMark {
		0% {
			margin-top: 26px;
			.scale(0.4);
			.opacity(0);
		}
		50% {
			margin-top: 26px;
			.scale(0.4);
			.opacity(0);
		}
		80% {
			margin-top: -6px;
			.scale(1.15);
			.opacity(1);
		}
		100% {
			margin-top: 0;
			.scale(1);
			.opacity(1);
		}
	}
	@-moz-keyframes animateXMark {
		0% {
			margin-top: 26px;
			.scale(0.4);
			.opacity(0);
		}
		50% {
			margin-top: 26px;
			.scale(0.4);
			.opacity(0);
		}
		80% {
			margin-top: -6px;
			.scale(1.15);
			.opacity(1);
		}
		100% {
			margin-top: 0;
			.scale(1);
			.opacity(1);
		}
	}
	@keyframes animateXMark {
		0% {
			margin-top: 26px;
			.scale(0.4);
			.opacity(0);
		}
		50% {
			margin-top: 26px;
			.scale(0.4);
			.opacity(0);
		}
		80% {
			margin-top: -6px;
			.scale(1.15);
			.opacity(1);
		}
		100% {
			margin-top: 0;
			.scale(1);
			.opacity(1);
		}
	}
	.animateXMark {
		-webkit-animation: animateXMark 0.5s;
		-moz-animation: animateXMark 0.5s;
		animation: animateXMark 0.5s;
	}
