:root {
	--modal-body-bg  : black;
	--modal-close-bg : white;
	--modal-wrap-bg  : rgba(0, 0, 0, 0.8);
}

body[data-modal-shown] {
	overflow : hidden !important;
}

[data-modal] {
	cursor : pointer;
}

.modal,
.modal * {
	-webkit-transition : all 0.2s ease-in-out;
	-o-transition      : all 0.2s ease-in-out;
	-moz-transition    : all 0.2s ease-in-out;
	transition         : all 0.2s ease-in-out;
	z-index            : 1000000;
}

.modal {
	position                : fixed;
	visibility              : visible;
	opacity                 : 1;
	top                     : 0;
	left                    : 0;
	width                   : 100%;
	height                  : 100%;
	background              : var(--modal-wrap-bg);
	-webkit-backdrop-filter : blur(15px);
	backdrop-filter         : blur(15px);
}

.modal.modal--hidden {
	visibility : hidden;
	opacity    : 0;
}

.modal[data-relation="wrapper"] {
	display                 : -webkit-box;
	display                 : -webkit-flex;
	display                 : -moz-box;
	display                 : -ms-flexbox;
	display                 : flex;
	-webkit-box-pack        : center;
	-webkit-justify-content : center;
	-moz-box-pack           : center;
	-ms-flex-pack           : center;
	justify-content         : center;
	-webkit-box-align       : center;
	-webkit-align-items     : center;
	-moz-box-align          : center;
	-ms-flex-align          : center;
	align-items             : center;
}

.modal [data-relation="overlay"] {
	display    : block;
	max-height : -webkit-calc(100% - 60px);
	max-height : -moz-calc(100% - 60px);
	max-height : calc(100% - 60px);
}

.modal.modal--hidden [data-relation="body"] {
	-webkit-transform : translateY(-25px);
	-ms-transform     : translateY(-25px);
	-moz-transform    : translateY(-25px);
	-o-transform      : translateY(-25px);
	transform         : translateY(-25px);
}

.modal [data-relation="body"] {
	position          : relative;
	display           : block;
	width             : -webkit-fit-content;
	width             : -moz-fit-content;
	width             : 550px;
	height            : auto;
	max-height        : 100%;
	margin            : 0 auto;
	background        : var(--modal-body-bg);
	-webkit-transform : translateY(0);
	-ms-transform     : translateY(0);
	-moz-transform    : translateY(0);
	-o-transform      : translateY(0);
	transform         : translateY(0);
}

.modal [data-relation="scrollable"] {
	padding    : 40px;
	max-height : -webkit-calc(100vh - 60px);
	max-height : -moz-calc(100vh - 60px);
	max-height : calc(100vh - 60px);
	overflow   : auto;
}

.modal [data-action="close"] {
	cursor     : pointer;
	position   : absolute;
	top        : 20px;
	right      : 20px;
	width      : 30px;
	height     : 30px;
	padding    : 5px;
	background : transparent;
	outline    : none;
	border     : unset;
}

.modal [data-action="close"] span {
	position          : relative;
	display           : block;
	width             : 100%;
	height            : 100%;
	-webkit-transform : rotate(45deg);
	-ms-transform     : rotate(45deg);
	-moz-transform    : rotate(45deg);
	-o-transform      : rotate(45deg);
	transform         : rotate(45deg);
}

.modal [data-action="close"]:hover span {
	-webkit-animation : linear 0.15s 1 rotate;
	-moz-animation    : linear 0.15s 1 rotate;
	-o-animation      : linear 0.15s 1 rotate;
	animation         : linear 0.15s 1 rotate;
}

.modal [data-action="close"] span:before,
.modal [data-action="close"] span:after {
	content               : '';
	position              : absolute;
	background            : var(--modal-close-bg);
	-webkit-border-radius : 5px;
	-moz-border-radius    : 5px;
	border-radius         : 5px;
}

.modal [data-action="close"] span:before {
	top    : -webkit-calc(50% - 1px);
	top    : -moz-calc(50% - 1px);
	top    : calc(50% - 1px);
	left   : 0;
	width  : 100%;
	height : 2px;
}

.modal [data-action="close"] span:after {
	top    : 0;
	left   : -webkit-calc(50% - 1px);
	left   : -moz-calc(50% - 1px);
	left   : calc(50% - 1px);
	height : 100%;
	width  : 2px;
}

@media screen and (max-width : 500px) {
	.modal [data-relation="overlay"] {
		max-height : 100%;
		height     : 100%;
	}

	.modal [data-relation="body"] {
		width  : 100%;
		height : 100%;
	}

	.modal [data-relation="scrollable"] {
		max-height : 100%;
	}
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform : rotate(45deg);
		transform         : rotate(45deg);
	}
	100% {
		-webkit-transform : rotate(135deg);
		transform         : rotate(135deg);
	}
}

@-moz-keyframes rotate {
	0% {
		-webkit-transform : rotate(45deg);
		-moz-transform    : rotate(45deg);
		transform         : rotate(45deg);
	}
	100% {
		-webkit-transform : rotate(135deg);
		-moz-transform    : rotate(135deg);
		transform         : rotate(135deg);
	}
}

@-o-keyframes rotate {
	0% {
		-webkit-transform : rotate(45deg);
		-o-transform      : rotate(45deg);
		transform         : rotate(45deg);
	}
	100% {
		-webkit-transform : rotate(135deg);
		-o-transform      : rotate(135deg);
		transform         : rotate(135deg);
	}
}

@keyframes rotate {
	0% {
		-webkit-transform : rotate(45deg);
		-moz-transform    : rotate(45deg);
		-o-transform      : rotate(45deg);
		transform         : rotate(45deg);
	}
	100% {
		-webkit-transform : rotate(135deg);
		-moz-transform    : rotate(135deg);
		-o-transform      : rotate(135deg);
		transform         : rotate(135deg);
	}
}