$crc: '.h-notification';

#{$crc}{
	position: relative;
	width: 100%;
	//z-index: 1000;

	&.-color-primary #{$crc}__box {
		box-shadow: $sd-hover--primary-box-shadow;
		border-color: $c-box--primary-border;

		&:after {
			background: $c-primary;
		}
	}
	&.-color-danger #{$crc}__box {
		box-shadow: $sd-hover--danger-box-shadow;
		border-color: $c-box--danger-border;

		&:after {
			background: $c-danger;
		}
		#{$crc}__title{
			color: $c-danger-text;
		}
	}
}


#{$crc}__box{
	background: $c-box-background;
	border-radius: $v-box-border-radius;
	border-width: $v-box-border-width;
	border-style: solid;
	overflow: hidden;

	&:after {
		content: '';
		position: absolute;
		width: 3px;
		left: 0;
		bottom: 0;
		top: 0;
		border-radius: 3px 0 0 3px;
	}
}

#{$crc}__close-icon{
	position: absolute;
	right: $g-8 + $v-box-border-width;
	top: $g-8 + $v-box-border-width;
	opacity: $o-80;
	transition: opacity $t-medium-standard;

	&:hover {
		opacity: $o-100;
	}
}
#{$crc}__title{
	padding: $g-12 $g-16;
	@include text-header();
}
#{$crc}__content{
	padding: 0 $g-16 $g-16;
	flex-grow: 1;

	&.-no-padding{
		padding: 0;
	}
}
#{$crc}__footer{
	padding: 0 $g-16 $g-16;
	text-align: right;
}