$crc: '.h-dialog';

#{$crc}{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	//z-index: 1000;
	//align-items: center;
	justify-content: center;


	&.-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}__backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity $t-medium-standard;

	&.-color-light {
		background: $c-box-backdrop-light;
	}

	&.-color-dark {
		background: $c-box-backdrop-dark;
	}
}

#{$crc}__scroll-container{
	position: relative;
	padding: $g-32;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	display: flex;
	box-sizing: border-box;
	scrollbar-gutter: stable;

	&.-transitioning {
		overflow-y: hidden;
		padding-right:#{$g-32} + calc(var(--h-scrollbar-width) - var(--h-global-scrollbar-width));

		&.-body-has-scrollbar {
			width: calc(100% - #{$g-32} + (var(--h-global-scrollbar-width) - var(--h-scrollbar-width)));
			padding-right: $g-32;
		}
	}
}
#{$crc}__box-container{
	position: relative;
	transition: transform $t-medium-standard;
	margin: auto;
}
#{$crc}__box{
	min-height: 100px;
	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;
		height: 3px;
		left: 0;
		right: 0;
		top: 0;
		border-radius: 3px 3px 0 0;
	}
}

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

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

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