/* ======================================================
    <!-- Modal Dialog -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';
$modal-box-radius: 8px;


.uix-modal-mask {
	background: rgba(0, 0, 0, 0);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 99997;
	display: none;
	content: '';
	background: rgba(0, 0, 0, 0.7);
}



.uix-modal-box {
	position: fixed;
	top: calc( -100vh - 71px ); /* For compatibility with mobile devices, do not use percentages "%" */
	z-index: 99998;
	pointer-events: none;
	transition: all .5s ease-out;
	width: 850px;
	height: 60vh;
	border-radius: $modal-box-radius;
	background: #fff;
	box-shadow: 0px 0px 71px 0px rgba(0, 0, 0, 0.47);
	left: 50%;
	transform: translate(-50%, -50%);


	&:not(.is-fullscreen) {
		max-width: calc(100vw - 100px);
		max-height: calc(100vh - 100px);
	}


	/* Video container */
	.uix-modal-box__video-container {

		> div.video-js {
			margin: 0 auto;
			transform: translateY(15px);
		}

	}

	.uix-modal-box__video-waiting {

		display: none;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 99998;
		margin-left: -1rem;

		&::after {
			font-family: 'Font Awesome 5 Free';
			font-weight: 600;
			content: "\f110";
			color: #fff;
			font-size: 2rem;
			text-shadow: 0 0 1px rgba(0,0,0,.1);
			display: inline-block;
			animation: fa-spin 2s infinite linear;
		}

		&.is-active {
			display: block;
		}
	}


	.uix-modal-box__content {
		word-wrap: break-word;
		height: 100%;

        
        > [class*="uix-modal-box__video-"], /* video content */
        > .uix-modal-box__body /* normal content */
        {
            position: relative;
            height: 100%;
            padding: 1.5rem 1.625rem 1.5rem 1.5rem;
        }
        
        /* content header */
 		> .uix-modal-box__head {
			position: relative;
            padding: 0 55px 0 1.5rem;
		}

        
        /* content body */
		> .uix-modal-box__body {
            
            > [role="note"] {
                overflow: hidden;
                height: 100%;
            }

		}

		img {
			@include transition-default();
			opacity: 0;
		}
	}

	.uix-modal-box__close {
		box-shadow: 2.5px 4.33px 16px 0px rgba(204, 23, 30, 0.31);
		border-radius: 50%;
		background: rgba(204, 23, 30, 1);
		width: 36px;
		height: 36px;
		display: inline-block;
		text-align: center;
		line-height: 34px;
		overflow: hidden;
		position: absolute;
		right: 12px;
		top: 12px;
		z-index: 1;
		pointer-events: auto;
        border: none;
        outline: none;
        cursor: pointer;

		&::after {
			font-family: 'Font Awesome 5 Free';
			font-weight: 600;
			content: "\f00d";
			color: #fff;
			font-size: 16px;
			margin: 0;
		}

		&:hover {
			background: #b50d14;
		}
        
        &:focus {
            outline: 3px auto -webkit-focus-ring-color;
        }

	}

	&.is-video {
		background: none;
		box-shadow: none;
        opacity: 0;

		.uix-modal-box__close::after {
			font-size: 2rem !important;
		}

	}

	&.is-active,
	&.is-fullscreen.is-active {
	    pointer-events: auto;
	}

	&.is-active {
	    top: 50vh; /* For compatibility with mobile devices, do not use percentages "%" */
	}
	&.is-fullscreen.is-active {
	    top: 0;
	}

	/* Video */
	&.is-fullscreen.is-video.is-active {
	    pointer-events: none;
        opacity: 1;

		.uix-modal-box__video-container {
			video,
			 > div.video-js,
			iframe {
				pointer-events: auto;
			}
		}
	}


	&.is-active .uix-modal-box__content img,
	&.is-fullscreen.is-active .uix-modal-box__content img {
		opacity: 1;
	}

	&.is-active .uix-modal-box__content {

		> .uix-modal-box__body {
            > [role="note"] {
                overflow-y: auto;
            }
			
		}

	}


	&.is-fullscreen {

		left: 0;
		width: 100% !important;
		height: 100% !important;
		transform: translateY(0);
		border-radius: 0;


		.uix-modal-box__close {

			&::after {
				font-size: 1rem;
			}

		}
		&.is-video .uix-modal-box__close {
			box-shadow: none;
			background: none;


		}
	}



}

@include customScrollbar( 'vertical', '.uix-modal-box__content > .uix-modal-box__body > [role="note"]' );





@media all and (max-width: 991px) {
	.uix-modal-box:not(.is-fullscreen) {
		width: 850px !important;
	}
}

@media all and (max-width: 768px) {
	.uix-modal-box:not(.is-fullscreen) {
	    width: 90% !important;
		height: 60vh !important;
	}
}