@use "~admin-stylesheets/colors";

body {
	margin: 0;
	padding: 0;
}

.nab-javascript-editor {
	$default-sidebar-width: 26em;

	height: 100%;
	width: 100vw;

	&__sidebar {
		box-sizing: border-box;
		height: 100%;
		left: 0;
		margin: 0;
		padding-right: 2px;
		position: absolute;
		top: 0;
		width: var(
			--nab-javascript-editor-sidebar-width,
			$default-sidebar-width
		);

		&--is-collapsed {
			left: calc(
				-1 * var(--nab-javascript-editor-sidebar-width, $default-sidebar-width)
			);
		}
	}

	&__resizer {
		position: absolute;
		top: 0;
		left: calc(
			var(--nab-javascript-editor-sidebar-width, $default-sidebar-width) -
				4px
		);
		background: colors.$color__border-editor;
		cursor: ew-resize;
		height: 100%;
		width: 4px;
	}

	&__preview {
		background: colors.$color__background-black;
		box-sizing: border-box;
		height: 100%;
		left: 0;
		margin: 0;
		margin-left: var(
			--nab-javascript-editor-sidebar-width,
			$default-sidebar-width
		);
		overflow: hidden;
		padding: 0;
		position: absolute;
		top: 0;
		width: calc(
			100% - var(
					--nab-javascript-editor-sidebar-width,
					$default-sidebar-width
				)
		);

		&--is-fullscreen {
			margin-left: 0;
			width: 100%;
		}
	}
}

.nab-javascript-editor:not(.nab-javascript-editor--is-dragging) {

	.nab-javascript-editor__sidebar {
		transition: left 200ms ease-in-out;
	}

	.nab-javascript-editor__preview {
		transition:
			margin 200ms ease-in-out,
			width 200ms ease-in-out;
	}
}

.nab-javascript-editor-sidebar__visibility-toggle {
	bottom: 13px;
	left: 0;
	z-index: 1;
}