@use "sass:color";

@use "../../hippie-style/hippie";

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

.body_frame {
	@extend %flex_column;

	background-color: hippie.$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: color.adjust(hippie.$color_back_io, $alpha: -.5);

				&:hover {
					background-color: hippie.$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: hippie.$margin_io;
		border: 0;
		padding: hippie.$space_half;
		// color: hippie.$color_text_io;
		color: white;
		// background-color: hippie.$color_back_io;
		background-color: transparent;
		line-height: 1.2;
	}
}


#content {
	background-color: hippie.$color_back_io;

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

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

		th {
			border: 1px solid hippie.$color_border_io;
		}

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


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

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