@use "variables";

[data-behaviour*='side'] {

	.ct-panel-inner {
		position: absolute;
		inset-block: 0px;
		height: calc(100% - var(--side-panel-offset, 0px) * 2);
		width: calc(100% - var(--side-panel-offset, 0px) * 2);
		max-width: var(--side-panel-width, 500px);
		margin: var(--side-panel-offset, 0px);
		box-shadow: var(--theme-box-shadow);
		border-radius: var(--side-panel-border-radius, 0px);
		transition: transform variables.$transition-duration ease-in-out;
	}
}

[data-panel*='in'] [data-behaviour*='side'] {

	&.active .ct-panel-inner {
		transform: translate3d(0, 0, 0);
	}
}

[data-behaviour*='right-side'] .ct-panel-inner {
	align-self: flex-end;
	transform: translate3d(var(--theme-panel-reveal-right, 20%), 0, 0);
}

[data-behaviour*='left-side'] .ct-panel-inner {
	align-self: flex-start;
	transform: translate3d(var(--theme-panel-reveal-left, -20%), 0, 0);
}
