.window:active::-webkit-resizer{
	/*resize: none;*/
	/*display: none;*/
	opacity: 0;
}
.window{
	border: var(--window-border);
	border-radius: var(--window-border-radius);
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);

	min-width: 240px;
	min-height: 200px;

	max-width: 100%;
	max-height: 100%;

	/* we use native html resize */
	/* width: var(--sx); */
	/* height: var(--sy); */
	/* for resize, we need to specify overflow */
	/* overflow: scroll; */
	overflow: hidden;
	resize: both;

	display: flex;
	flex-direction: column;

	animation-name: window-opening-animation;
	transition-duration: 120ms; /* for maximizing and etc. */
	/*transform-origin: center;*/
	/*transition-timing-function: linear;*/
	transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 1.0);
	animation-duration: 220ms;
	/*animation-fill-mode: forwards;*/
	/*background-color: #2222;*/
}


.windowContent{
	transition-duration: 400ms; /* for dragging scale */
	/*transform-origin: top;*/



	/*background-color: #53f2;*/
	min-height: 0;
	
	flex: 1;
	display: flex;

	border: 1px solid #222;
	background-color: #2228;

}

.windowPage{
	/*overflow: scroll;*/
	width: 100%;

	pointer-events: var(--iframe-pointer-event);

	/* width: 100%; */
	/* height: 100%; */

	
	
	/* background-color: red; */
	/* height: inherit; */
	/* background-color: red; */
}

@keyframes window-opening-animation{
	from{
		transform: scale(0);
		/*opacity: 0;*/
	}
	to{
		transform: scale(1);
		/*opacity: 1;*/
	}
}


.window.closing{
	animation-name: closingAnim;
	animation-duration: 200ms;
	animation-fill-mode: forwards;
}

@keyframes closingAnim{
	from{
		transform: scale(1.0);
		opacity: 1;
	}to{
		transform: scale(0);
		opacity: 0;
	}
}

.window.minimizing{
	animation-name: minimizingAnim;
	animation-duration: 200ms;
	animation-fill-mode: forwards;
}

@keyframes minimizingAnim{
	from{
		transform: translateY(0);
		opacity: 1;
	}to{
		transform: translateY(10%);
		opacity: 0;
	}
}

.window.maximized>.windowTopBar{
}
.window.maximized>.windowTopBar{
    /*background-color: hsl(228deg, 20%, 50%);*/
    /*--top-bar-thickness: 1.1rem;*/

    border-radius: 0 !important;
}
.window.maximized{
	border-radius: 0;
    --x: 0 !important;
    --y: 0 !important;
    --w: 100% !important;
    --h: 100% !important;
}

.window.maximized,
.window.snappedLeft,
.window.snappedRight{
	border-radius: 0;
	resize: none;
}

.window.snappedLeft{
    --x: 0 !important;
    --y: 0 !important;
    --w: 50% !important;
    --h: 100% !important;
    box-shadow: 1px 0 4px 0 #0002;
}

.window.snappedRight{
    --x	: 50% !important;
    --y: 0 !important;
    --w: 50% !important;
    --h: 100% !important;
    box-shadow: -1px 0 4px 0 #0002;
}
.window.snappedRight>.windowTopBar{
    border-top-right-radius: 0;
}