.alert-window {
	position: fixed;
	width: 300px;
	z-index: 10002;

	right: 20px;
	top: 70px;

	.alert {
		&::before {
			position: relative;
			top: -15px;
			left: -15px;
			display: block;
			height: 2px;
			width: 0;
			transition: inherit;
		}

		&.alert-info::before {
			background-color: @brand-info;
		}

		&.alert-warning::before {
			background-color: @brand-warning;
		}

		&.alert-success::before {
			background-color: @brand-success;
		}

		&.alert-danger::before {
			background-color: @brand-danger;
		}

		&.animate {
			&.alert-info::before {
				background-color: lighten(@brand-info, 25%);
			}
			
			&.alert-warning::before {
				background-color: lighten(@brand-warning, 25%);
			}
			
			&.alert-success::before {
				background-color: lighten(@brand-success, 25%);
			}
			
			&.alert-danger::before {
				background-color: lighten(@brand-danger, 25%);
			}
			
			&::before {
				width: ~"calc(100% + 50px)";
			}
		}

		img {
			float: left;
			padding-right: 10px;
		}	
	}
}