@mixin nav-spacer($name, $size, $orientation) {
	.spacer.#{$name} {
		width: $size;
	}
}

.body_frame {
	@extend %flex-column;

	background-color: $color_back_basic;

	position: relative;
	height: 100%;

	header,
	aside,
	footer {
		border: 1px solid transparent;
	}

	&>header {
		background-color: rgba(0, 0, 0, .1);
	}

	main {
		@extend %flex-row;

		flex: 1;

		aside {
			// background-color: rgba(255, 255, 255, .1);
		}

		section {

			&>header,
			&>footer {
				background-color: transparentize($color_back_io, .5);

				&:hover {
					background-color: $color_back_io;
				}
			}
		}

		section,
		section>div {
			flex: 1;
		}

		section {
			@extend %flex-column;
			gap: 0;
		}
	}
}

.body_cli {
	@extend .body_frame;

	background-color: black;
}

#cli {
	@extend %flex-column;

	background-color: black;

	#line {
		@extend %flex-row;
	}

	#prompt {
		flex: 1;
	}

	pre {
		margin: .5em 0;
		color: white;
	}

	textarea {
		resize: none;
		max-height: 128px;
		margin: $margin_io;
		border: 0;
		padding: $space_half;
		// color: $color_text_io;
		color: white;
		// background-color: $color_back_io;
		background-color: transparent;
		line-height: 1.2;
	}
}



#content {
	background-color: $color_back_io;

	&>table {
		width: 100%;
		margin: 0;
		border: 0;

		tr:hover td {
			background-color: $color_highlight_basic;
		}

		th {
			border: 1px solid $color_border_io;
		}

		td {
			border-width: 0 1px;
			border-style: solid;
			border-color: $color_border_io;
		}
	}
}



.io {
	.spacer {
		margin: 0;
		border: $border_dotted;
		padding: 0;
		opacity: .25;
	}

	@include nav-spacer('a', $space_double, false);
	@include nav-spacer('b', $space_small, false);
}