@use 'sass:list';
@use "sass:map";

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

.body_tfw {
	@extend .h_full_view;

	display: flex;
	flex-flow: column nowrap;

	th,
	.important,
	.subtle,
	button,
	input[type="text"],
	select {
		text-transform: uppercase;
	}

	th,
	.important {
		color: white;
		background-color: hippie.basic_color(echo);
	}

	.important {
		padding: hippie.$space_half;
		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
		font-weight: bold;
	}

	.subtle {
		@extend .txt_smaller;

		color: hippie.$color_darkest;
	}

	.success {
		color: hippie.basic_color(alpha);
	}

	.background {
		position: relative;
		overflow: hidden;

		*:not(canvas, img) {
			z-index: map.get(hippie.$z-indexes, "content-bottom");
			position: relative;
			color: white;
		}

		canvas, img {
			z-index: map.get(hippie.$z-indexes, "default");
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	& > header {
		& > button.active {
			border-color: hippie.$color_highlight_basic;
			color: hippie.$color_highlight_basic;
			background-color: hippie.$color_action_basic;
		}

		& > button:not(:first-child, :last-child, :nth-child(2)) {
			flex: 1;
		}
	}

	.view {
		flex: auto;
		display: flex;
		flex-flow: column nowrap;
		min-height: 0;

		& > main {
			flex: auto;
			display: flex;
			flex-flow: row nowrap;
			gap: hippie.$space_double;
			min-height: 0;

			& > div:last-child {
				flex: 2;
			}

			& > div:nth-child(2) {
				flex: 4;
				display: flex;
				flex-flow: column nowrap;
				gap: hippie.$space_basic;
				min-height: 0;

				div:first-child {
					flex: auto;
					overflow: auto;
					min-height: 0;
				}

				div:last-child {
					flex: 0 0 auto;
				}
			}

			nav {
				flex: 1;
				display: flex;
				flex-flow: column nowrap;
				gap: hippie.$space_basic;
				min-height: 0;

				input:not([type="checkbox"], [type="range"]) {
					@extend .input_io;
				}

				select {
					@extend .io_select;
				}
			}

			table {
				table-layout: fixed;
				width: 100%;
				margin: 0;

				th {
					text-align: center;
				}

				td {
					height: 4em;
					vertical-align: top;

					span {
						z-index: map.get(hippie.$z-indexes, "content-bottom");
						position: relative;
						color: white;
					}

					&:last-child {
						text-align: center;
						vertical-align: middle;
					}
				}

				.l {
					width: 30%;
				}

				.q {
					width: 50%;
				}

				.t, .s {
					width: 20%;
				}
			}
		}

		& > footer {
			justify-content: space-between;
			padding: hippie.$space_basic;

			& > button:last-child {
				//margin-left: auto;
				padding-inline: 2em;
			}
		}
	}

	.quest,
	footer *:not(button[data-action="back"]) {
		opacity: 0;
	}
}