@import 'modal';
@import 'panel';

[data-panel] {
	// overflow: hidden;
}

.ct-panel {
	display: flex;
	align-items: center;

	.content-container {
		margin: auto;
		width: 100%;
		max-height: 100%;
		overflow: var(--overflow, auto);
		-webkit-overflow-scrolling: touch;

		> section {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			padding: var(--padding, 50px);
		}
	}
}



// close button
.ct-panel > .close-button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 2;
	top: var(--top, 15px);
	right: var(--right, 15px);
	width: 40px;
	height: 40px;
	cursor: pointer;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0.5);

	.close {
		color: #fff;
		opacity: 0.8;
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	}

	&:hover {
		.close {
			opacity: 1;
			transform: rotate(90deg);
			color: var(--paletteColor1);
		}
	}
}