//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables

/*-----iao-alert-box-------*/
.checkbox {
	input[type="checkbox"] {
		position: $pos-rel;
		margin-top: 4px\9;
		margin-left: $m-0;
		margin-right: $m-5;
	}
}
.checkbox-inline {
	input[type="checkbox"] {
		position: $pos-rel;
		margin-top: 4px\9;
		margin-left: $m-0;
		margin-right: $m-5;
	}
}
.radio {
	input[type="radio"] {
		position: $pos-rel;
		margin-top: 4px\9;
		margin-left: $m-0;
		margin-right: $m-5;
	}
}
.radio-inline {
	input[type="radio"] {
		position: $pos-rel;
		margin-top: 4px\9;
		margin-left: $m-0;
		margin-right: $m-5;
	}
}
iao-alert-box {
	display: block;
	position: fixed;
	right: 0;
	top: 40px;
	width: 100%;
	padding: $p-20 $p-20 $p-0 $p-20;
	box-sizing: border-box;
	max-width: 500px;
	overflow: auto;
	z-index: 9999;
}
iao-alert-box[position='top-left'] {
	right: auto;
	left: 0;
}
iao-alert-box[position='bottom-left'] {
	right: auto;
	left: 0;
	top: auto;
	bottom: 0;
}
iao-alert-box[position='bottom-right'] {
	right: 0;
	left: auto;
	top: auto;
	bottom: 0;
}
iao-alert {
	display: block;
	position: $pos-rel;
	font-size: 14px;
	padding: $p-10 35px $p-10 15px;
	font-weight: normal;
	background-color: $additional-color-3;
	border-radius: 4px;
	margin-top: $m-20;
	margin-bottom: $m-20;
	box-sizing: border-box;
	box-shadow: 0 3px 5px $color_286;
	letter-spacing: 1px;
	&:before {
		content: "";
		position: $pos-abs;
		background-color: $white;
		opacity: 0.8;
		transform: $rotate-45deg;
		width: 16px;
		height: 2px;
		box-sizing: border-box;
		right: 14px;
		top: calc(50% - 1px);
	}
	&:after {
		content: "";
		position: $pos-abs;
		background-color: $white;
		opacity: 0.8;
		transform: $rotate-45deg;
		width: 2px;
		height: 16px;
		box-sizing: border-box;
		right: 21px;
		top: calc(50% - 8px);
	}
}
iao-alert-close {
	position: $pos-abs;
	display: block;
	right: 12px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	top: calc(50% - 10px);
	z-index: 1;
}
iao-alert[fade-on-hover='true'] {
	&:hover {
		opacity: 0.6;
	}
}
iao-alert[close-on-click='true'] {
	cursor: pointer;
}
iao-alert[type='notification'][mode="pink"] {
	color: $white;
	background-color: $additional-color-3;
}
iao-alert[type='notification'][mode='orange'] {
	background-color: $additional-color-5;
	color: $white;
}
iao-alert[type='notification'][mode='peach'] {
	color: $white;
	background-color: $additional-color-10;
}