header,
aside,
footer {
	&.io {
		nav li {
			margin: 0;
		}

		nav > div:not(.spacer),
		nav > span,
		.a_button {
			@extend %basic;
			@extend %size_io_button;
		}

		.a_button {
			color: $color_text_io;
			background-color: $color_back_io;

			&:active,
			&:focus,
			&:hover {
				background-color: transparentize($color_highlight_basic, 0.8);
			}
		}
	}
}

header,
aside {
	&.io {
		padding: $space_basic;

		input,
		button,
		textarea,
		select {
			margin-inline: $space_half;
		}

		input {
			@extend .input_io;
		}

		textarea {
			@extend .io_textarea;
		}

		select {
			@extend .io_select;
		}

		button {
			@extend .button_io;
		}
	}
}

header,
footer {
	&.io {
		@extend %flex-inline;
		align-items: stretch;
	}
}