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

.body_setting {
	@extend .body_ui;

	background-color: $color_back_basic;
}

#frame {
	@extend %flex-column;

	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: $color_brighter;
		}

		section {
			flex: 1;
		}
	}
}

.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);
}