@import 'options/_variables';
@import 'options/_mixin';

.mw-alert{
	position   :absolute;
	z-index    :2000;
	text-align :center;
	margin     :auto;
	top        :0;
	left       :0;
	right      :0;
	border     :1px solid transparent;
	padding    :10px 15px;
	font-size  :20px;
	@include border-bottom-left-radius(4px);
	@include border-bottom-right-radius(4px);
	@include display-flex();
	@include align-items(center);
	@include justify-content(space-between);
	@include box-shadow(0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24));
}

@media (min-width :576px){
	.mw-alert{
		width :80%;
	}
}

@media (min-width :768px){
	.mw-alert{
		width :70%;
	}
}

@media (min-width :992px){
	.mw-alert{
		width :60%;
	}
}

@media(min-width :1200px){
	.mw-alert{
		width :50%;
	}
}

.mw-alert button{
	-webkit-appearance :none;
	-moz-appearance    :none;
	cursor             :pointer;
	border             :0;
	float              :right;
	opacity            :.2;
	color              :inherit;
	background         :0 0;
	font-size          :30px;
	font-weight        :700;
	outline            :none;
	padding            :0 0 0 15px;
}

.mw-alert button:focus{
	outline :none;
}

.mw-alert-text{
	word-break :break-all;
}

/*
 *	add hover effect
 */
.mw-alert button:hover{
	opacity :.4;
}

/*
 *	add color
 */
.mw-alert.alert-success{
	background-color :lighten(#4CAF50, 15%);
	border-color     :lighten(#4CAF50, 10%);
	color            :darken(#4CAF50, 15%);
}

.mw-alert.alert-warning{
	background-color :lighten(#FFC107, 15%);
	border-color     :lighten(#FFC107, 10%);
	color            :darken(#FFC107, 15%);
}

.mw-alert.alert-danger{
	background-color :lighten(#F44336, 15%);
	border-color     :lighten(#F44336, 10%);
	color            :darken(#F44336, 15%);
}

.mw-alert.alert-info{
	background-color :lighten(#2196F3, 15%);
	border-color     :lighten(#2196F3, 10%);
	color            :darken(#2196F3, 15%);
}

/*
 *	Add animation effect
 */
.mw-alert.ng-enter{
	@include animation(AlertIn .35s both ease-out);
}

.mw-alert.ng-leave{
	@include animation(AlertOut .35s both ease-in);
}

@include keyframes(AlertIn){
	from{
		margin-top :-100%;
	}
	to{
		margin-top :0;
	}
}

@include keyframes(AlertOut){
	from{
		margin-top :0;
	}
	to{
		margin-top :-100%;
	}
}