#code-editor-dialog,
#console-dialog {
	margin: 0;
	top: unset;
	min-height: 5rem;
	width: 100%;
	max-width: 100%;
	padding: 0;
	overflow: visible;

	&[open] {
		@starting-style {
			translate: 0 100vh;
		}

		translate: 0 0;
	}

	transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
	translate: 0 100vh;
}

.close-icon {
	position: absolute;
	right: -0.5em;
	top: -0.5em;
}

#code-editor-dialog {
	min-height: 10lh;
	background-color: var(--pre-bgc);

	.done-icon {
		position: absolute;
		right: 0.2em;
		bottom: 0.2em;
	}

	& code-editor-pad {
		display: block;
		width: 100%;
		min-height: 10lh;
		margin-block: 0;
		padding-block: 0.2e;
		overflow-x: auto;
		overflow-y: auto;
		scrollbar-width: thin;

		& code-line {
			font-size: 0.94rem;
		}
	}
}

#console-dialog {
	& ul {
		padding-left: 0;
		margin-block: 0;
	}

	& li {
		border-bottom: var(--border);
		font-size: 0.75rem;
		padding: 0.2em;

		&.error {
			color: #f90f0f;
		}

		&.warn {
			color: orange;
		}
	}
}
