$alert-bg-alpha: 0.1;

.alert {
	padding: $space-3 $space-4;
	border-left-style: solid;
	border-left-width: 4px;
	color: $color-text-light;

	&.alert-primary {
		border-color: $color-primary;
		background: rgba($color-primary, $alert-bg-alpha);
		color: $color-primary;
	}

	&.alert-success {
		border-color: $color-success;
		background: rgba($color-success, $alert-bg-alpha);
		color: $color-success;
	}

	&.alert-secondary {
		border-color: $color-secondary;
		background: rgba($color-secondary, $alert-bg-alpha);
		color: lighten($color-secondary, 10%);
	}

	&.alert-info {
		border-color: $color-info;
		background: rgba($color-info, $alert-bg-alpha);
		color: lighten($color-info, 20%);
	}

	&.alert-warning {
		border-color: $color-warning;
		background: rgba($color-warning, $alert-bg-alpha);
		color: $color-warning;
	}

	&.alert-error, &.alert-danger {
		border-color: $color-error;
		background: rgba($color-error, $alert-bg-alpha);
		color: lighten($color-error, 15%);
	}
}