/*
 * IDE
**/


.ide {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;

	display: flex;
	flex-direction: column;
}


.top-bar {
	width: 100%;
	height: var(--space-48);
	flex-shrink: 0;

	background-color: var(--color-blue-grey-850);
	border-bottom: 1px solid var(--color-blue-grey-700);
	z-index: 1;
}


.workspace {
	flex-grow: 1;

	display: flex;
	flex-direction: row;

	height: calc(100vh - 48px - 32px);
}





/* Left side */


.workspace__left {
	position: relative;
	width: var(--space-192);
	padding-bottom: var(--space-64);

	display: flex;
	flex-direction: column;
	background-color: var(--color-blue-grey-850);

	overflow: hidden auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-blue-grey-500) var(--color-blue-grey-900);

	transition: width var(--duration-400) ease-in-out;

	&::after {
		content: '';
		display: block;
		height: var(--space-48);

		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;

		background: linear-gradient(rgba(0,0,0,0), var(--color-blue-grey-850));

		pointer-events: none;
	}

	.--is-left-collapsed & {
		width: var(--space-64);
	}
}


.workspace__collapse-left-btn {
	width: var(--space-32);
	height: var(--space-32);

	position: fixed;
	bottom: var(--space-32);
	left: var(--space-16);
	z-index: var(--zindex-above);

	display: grid;
	place-items: center;

	border-radius: var(--borderRadius-max);
	color: var(--color-blue-grey-300);
	background-color: var(--color-blue-grey-850);
	border: 1px solid var(--color-blue-grey-700);

	transition: all var(--duration-200) ease-in-out;

	svg {
		width: var(--space-16);
		height: var(--space-16);
		transform: rotate(180deg);

		transition: all var(--duration-200) ease-in-out;

		.--is-left-collapsed & {
			transform: rotate(0deg);
		}
	}

	&:hover {
		color: var(--color-blue-grey-900);
		border: 1px solid var(--color-yellow-action);
		background-color: var(--color-yellow-action);
	}

	.--is-transitioning & {
		pointer-events: none;
	}
}





/* Canvas */

.workspace__canvas-wrapper {
	flex-grow: 1;

	line-height: 0;

	canvas {
		width: 100% !important; /* TODO: Remove, testing mode */
	}
}





/* Bottom */

.bottom-bar {
	width: 100%;
	height: var(--space-32);
	flex-shrink: 0;
	padding-left: var(--space-192);

	display: flex;
	align-items: center;
	background-color: var(--color-blue-grey-850);

	transition: padding-left var(--duration-400) ease-in-out;

	.--is-left-collapsed & {
		padding-left: var(--space-64);
	}
}