.alert {
	position: relative;
	color: white;
	font-size: 14px;
	line-height: 20px;
	margin: 0 auto $relatedMargin;
	word-wrap: break-word;
	overflow: hidden;
	padding: (($unit - 20px) / 2) $defaultMargin (($unit - 20px) / 2) ($unit + $defaultMargin);
	border: none;
	min-height: $unit;

	@include box-sizing(border-box);
	@include box-shadow(0 0 14px rgba(0, 0, 0, .15));
	@include border-radius(0px);

	&::after {
		content: '';
		display: block;
		position: absolute;
		left: $unit;
		top: 0;
		bottom: 0;
		width: 1px;
		background: rgba(255, 255, 255, .25);
	}

	&.alert-error {
		background-color: $warning;
	}

	&.alert-success {
		background-color: $green;
	}

	&.alert-warning {
		background-color: $orange;
	}

	&.alert-info {
		background-color: $blue;
	}

	.glyphicon {
		position: absolute;
		left: 0;
		top: 50%;
		width: $unit;
		height: $unit;
		line-height: $unit;
		text-align: center;
		margin-top: -($unit / 2);
	}
}

p.alert {
	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: $unit;
		height: $unit;
		line-height: $unit;
		text-align: center;
		margin-top: -($unit / 2);
		display: inline-block;
		font-family: 'Glyphicons Halflings';
		font-style: normal;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	&.alert-error::before {
		content: "\e090";
	}

	&.alert-success::before {
		content: "\e013";
	}

	&.alert-warning::before {
		content: "\e107";
	}

	&.alert-info::before {
		content: "\e086";
	}
}

.glyphicon-spin {
	-webkit-animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
	-o-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(359deg);
	}
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
	}
}

@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(359deg);
	}
}

@-ms-keyframes spin {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(359deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}