input[type="range"] {
	accent-color: $color_text_io;
}

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

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

		.a_button {
			@extend .button_io;
		}

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

		input[type="range"] {
			margin: 0;
		}

		select {
			@extend .io_select;
		}

		button {
			@extend .button_io;

			&>* {
				pointer-events: none;
			}
		}
	}
}

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

		textarea {
			@extend .io_textarea;
		}
	}
}

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