// growl notification

#growl-container {
	position:fixed;
	z-index:9999;
	top:10px;
	left:0;
	right:0;

}

.growl {
	position: relative;
	margin:-50px auto $spacingS auto;
	border-radius: $borderRadiusS;
	background: $blue2;
	color: $white;
	box-shadow: 1px 1px 4px rgba($black, (20/100));
	opacity:0;
	width:100%;
	@include transition(unquote("opacity 0.5s ease-out,margin 0.5s ease-out"));

	.msie7 &,
	.msie8 &,
	.msie9 &  {
		display:none;
	}

	&.growl-active {
		margin-top:0;
		opacity:0.9;
		.msie7 &,
		.msie8 &,
		.msie9 & {
			display:block;
		}
	}

	@if $rtl == false {
		@mixin alignLeft($rtl){
		margin:-50px auto $spacingS $spacingS;
	}}
	@if $rtl == false {
		@mixin alignRight($rtl){
		margin:-50px $spacingS $spacingS auto;
	}}
	@if $rtl == true {
		@mixin alignLeft($rtl){
		margin:-50px $spacingS $spacingS auto;
	}}
	@if $rtl == true {
		@mixin alignRight($rtl){
		margin:-50px auto $spacingS $spacingS;
	}}

	&.growl-position-right {
		@include alignRight($rtl);
	}

	&.growl-position-left {
		@include alignLeft($rtl);
	}

	&.growl-active {
		margin-top:0;
		opacity:0.9;
		.msie7 &,
		.msie8 &,
		.msie9 & {
			display:block;
		}
	}

	.growl-close {
		opacity:1;
		@if $rtl == false { @mixin position($rtl){ right: 0.5em; }}
		@if $rtl == true { @mixin position($rtl){ left: 0.5em; }}

		position: absolute;
		top: 0;
		@include position($rtl);

		.vicon {
			color: $black;
			font-size: 0.8em;
			opacity: 0.4;
			height: 2em;
			line-height: 2em;
		}
		&:hover,
		&:focus {
			.vicon {
				opacity: 1;
			}
		}
		&:focus {
			outline: thin dotted;
		}
	}


	.growl-content {
		opacity:1;
		display: table-cell;
		width: 100%;
		vertical-align: middle;
		padding: $spacingS $spacingL;
		font-size:1.2em;
		line-height:1.2em;
	}

	.growl-icon {
		opacity:1;
		display: table-cell;
		padding: 0 10px;
		font-size: 1.5em;
		color: $white;
		vertical-align: middle;
		background: mix(#000000, $blue2, 10%);
		border-radius: $borderRadiusS 0 0 $borderRadiusS;
		content:"v"
	}
}

.growl-type-warning {
	@include gradient-vertical(mix(#ffffff, $yellow, 80%), mix(#ffffff, $yellow, 70%));
	color: $baseFontColor;

	a {
		color: $baseFontColor;
	}

	.growl-icon {
		background: none;
		color: $yellow;
	}
}

.growl-type-error {
	background: $orange2;

	.growl-icon {
		background: mix(#000000, $orange2, 10%);
	}
}

.growl-type-success {
	background: $green2;

	.growl-icon {
		background: mix(#000000, $green2, 10%);
	}
}

.growl-type-notification {
	background: $blue4;

	.growl-icon {
		background: mix(#000000, $blue4, 10%);
	}
}

.growl-type-premium {
  $bg-growl-premium: mix(#ffffff, $black, 24%);
  background: $bg-growl-premium;

  .growl-icon {
    background: mix(#000000, $bg-growl-premium, 10%);
		color: $orange4;
	}
}