.resa-panel {
	display: none;
	flex-direction: column;
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	content-visibility: auto;

	.resa-panel-close {
		text-align: right;
		font-size: 20px;
		color: #fff;
		cursor: pointer;
		background: none;
		box-shadow: none;
		margin: 0;
		padding: 3px 12px;
	}

	&.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		display: flex;
	}

	.resa-panel-header {
		padding: 20px;
		text-align: right;
	}

	.resa-panel-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 500px;
		max-width: 90%;
		right: 0;
		background: #121519;
		overflow-y: auto;

		.resa-panel-body {
			padding: 30px;
			padding-top: 0;
		}
	}
}

body {
	&.admin-bar {
		.resa-panel {
			top: 32px;
		}
	}

	&[data-resa-panel="true"] {
		overflow: hidden;
	}
}
