@mixin nav-spacer($name, $size, $orientation) {
	.spacer-#{$name} {
		width: $size;
		margin: 0;
		border: $border_dotted;
		opacity: .25;
	}
}

#frame {
	position: relative;
	height: 100%;

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

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

	main {
		aside {
			background-color: $color_brighter;
		}
	}
}

.frame-flex {
	display: flex;
	flex-direction: column;
	gap: $space_basic;

	main {
		flex: 1;

		aside,
		section {
			height: 100%;
		}
	}
}

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

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