@import 'css/master/settings/settings';

//Errors
.alert_msg {
	&.block_level {
		display: block;
	}
	
	@include font-size($baseFontSize - 2);
	margin: $commonPadding*3 0;
	opacity: 0;
	width: 100%;

	transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;

	&.no_show {
		position: fixed;
		right: 100%;
	}

	p {
		margin-left: $commonPadding*12;
		padding: $commonPadding 0;
	}
	.svg {
		background-color: $white;
		border-radius: 50%;
		bottom: 6px;
		float: left;
		line-height: $commonPadding*6;
		padding: $commonPadding*2;
		position: relative;
		right: 8px;

		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		
		transition: transform 1.4s ease-in-out;
		-webkit-transition: transform 1.4s ease-in-out;
	}

	&.msg_danger {
		background-color: $red;
		p {
			color: #fff;
		}
		.svg {
			border: 4px solid $red;
		}
	}
	&.msg_success {
		background-color: $white;
		margin-top: 20px;
		p {
			color: $black;
		}
		.svg {
			border: 4px solid $green;
			fill: $green;
		}
		a {
		 	color: $black;
		 	text-decoration: underline;
		 	&:hover {
		 		color: $black;
		 	}
		}
	}

	&.show {
		opacity: 1;

		transition: opacity .2s ease-out;
		-webkit-transition: opacity .2s ease-out;

		.svg {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);

			transition: transform 1.4s ease-in-out;
			-webkit-transition: -webkit-transform 1.4s ease-in-out;
		}
	}
}

//TODO Remove this section and change the JSP to use the above styles
.message.inline_warning {
	background: $yellow;
	position: absolute;
	top: 0;
	left: 5px;
	z-index: 5;
	color: $black;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 4px;

	&::after {
		top: 100%;
		left: 7%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(206, 0, 0, 0);
		border-top-color: $yellow;
		border-width: 5px;
		margin-left: -5px;
	}
}

.alertz.block_levelz {
	display: block;
	margin: 12px 0 20px;
	opacity: 0;
	width: 100%;
	@include font-size($baseFontSize - 2);
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: opacity .2s ease-out;
	&.no_show {
		position: fixed;
		right: 100%;
	}
	p {
		margin-left: 44px;
		padding: 4px;
	}
	.svg {
		background-color: $white;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 50%;
		bottom: 8px;
		float: left;
		line-height: 24px;
		padding: 8px;
		position: relative;
		right: 8px;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(0deg);
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: transform 1.4s ease-in-out;
	}
	&.alert_dangerz {
		background-color: $red;
		p {
			color: $white;
		}
		.svg {
			border: 4px solid $red;
		}
	}

	&.alert_info {
		background-color: $lightBlue;
		p {
			color: $black;
		}
		span {
			border-radius: 50%;
			background: white;
			position: absolute;
			width: 36px;
			height: 36px;
			border: 4px solid #e3edf8;
			margin-top: -8px;
			margin-left: -5px;
			font-size: 32px;
			font-family: serif;
			text-align: center;
			color: #e3edf8;
		}
		.svg {
			border: 4px solid $lightBlue;
		}
	}
	&.alert_warningz {
		background-color: $yellow;
		p {
			color: $black;
		}
		.svg {
			border: 4px solid $yellow;
		}
		// handle IE SVG fallback
		img {
			display: inline-block;
            float: left;
			margin-top: -10px;
            margin-left: -7px
		}
	}
	&.alert_successz {
		background-color: $green;
		p {
			color: $black;
		}
		.svg {
			border: 4px solid $green;
		}
	}
	&.show {
		opacity: 1;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: opacity .2s ease-out;
		.svg {
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: rotate(360deg);
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: transform 1.4s ease-in-out;
		}
	}
}
#creditCardIframeError {
	.alertz {
		p {
			padding: $commonPadding;
		}
	}
}