/*
Alerts

Use alerts to inform a user about system state information or brief instructions
that should be shown in a static manner on the page.

markup:
<div class="alert">This is the default alert message.</div>
<div class="alert is-error">This is an error alert message.</div>
<div class="alert is-success">This is an alert message about a successful event.</div>
<div class="alert is-offline">This is an offline alert message.</div>

Styleguide 1.6
*/

.alert {
	@extend .alert-info;
	@extend .clearfix;
	position: relative;
	border: 0px;
	margin: 0px;
	padding: 1em;

	background-color: $background-color-alt;
	color: $text-color;
	border: 1px $border-color solid;
	border-radius: $border-radius;

	&.is-error,
	&.is-danger {
		@include icon('exclamation-circle');
		color: $brand-danger;
		border-color: $brand-danger;
		background-color: $background-color-danger;
	}

	&.is-success {
		@include icon('check-circle');
		color: $brand-success;
		border-color: $brand-success;
		background-color: $background-color-success;
	}

	&.is-offline {
		@include icon('bolt');
		color: $black;
		border-color: $brand-offline;
		background-color: $background-color-offline;
	}

	&.is-success,
	&.is-error,
	&.is-danger,
	&.is-offline {
		padding-left: 4em;
		&::before {
			font-size: 2em;
			position: absolute;
			top: 50%;
			left: 0.5em;
			transform: translateY(-50%);
		}
	}

	&.is-offline {
		&::before {
			color: $brand-offline;
			left: 0.75em;
		}
	}

	&.is-info {
		@extend .alert-info;
	}

	> button {
		float: right;
		margin-top: -0.5em;
		margin-bottom: -0.5em;
	}


}

.alert-info, .alert-danger, .alert-success, .alert-offline {
	@extend .alert;
}

.alert-danger{
	@extend .alert.is-danger;
}

.alert-success{
	@extend .alert.is-success;
}