opal-modal {
	display: none;
}

@component OpalModal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: none;
	overflow: auto;
	box-sizing: border-box;
	padding: 20px;
	background: rgba(0,0,0,.6);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;

	&::before {
		display: inline-block;
		width: 0;
		height: 100%;
		content: '';
		vertical-align: middle;
	}

	@el window {
		position: relative;
		display: inline-block;
		padding: 30px;
		border-radius: 3px;
		background: #fff;
		box-shadow: 0 0 20px rgba(0,0,0,.3);
		vertical-align: middle;
		text-align: left;
		white-space: normal;
		cursor: default;

		&:hover {
			@el btnClose {
				&::before,
				&::after {
					background: hsl(0,0%,80%);
				}

				&:hover::before,
				&:hover::after {
					background: #fff;
				}

				&:active::before,
				&:active::after {
					background: hsl(0,0%,60%);
				}
			}
		}
	}
		@el btnCloseWrapper {
			position: absolute;
			top: -10px;
			left: 100%;
			padding: 0 10px;
			height: 100%;
			pointer-events: none;
		}
			@el btnClose {
				position: relative;
				position: sticky;
				top: 10px;
				box-sizing: content-box;
				padding: 10px;
				width: 25px;
				height: 25px;
				border: 0;
				background: none;
				cursor: pointer;
				pointer-events: auto;

				&::before,
				&::after {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					width: 25px;
					height: 3px;
					border-radius: 2px;
					background: #fff;
					content: '';
					transition: background .1s linear;
					transform: rotate(45deg);
				}

				&::after {
					transform: rotate(-45deg);
				}

				&:hover::before,
				&:hover::after {
					background: #fff;
				}

				&:active::before,
				&:active::after {
					background: hsl(0,0%,60%);
				}
			}

		@el contentSlot {
			position: relative;
			display: block;
		}

	@mod opened {
		display: block;
	}

	&._overlapped {
		left: 100%;
		overflow: visible;
	}
}