@use "../../global/config";
@use "../../global/common";
@use "../../global/typography";
@use "../../elements/interactive";

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

header,
aside,
footer {
	&.io {
		nav {
			li,
			label,
			input[type="range"] {
				margin: 0;
			}
		}

		nav > span,
		nav label,
		.a_button {
			@extend %basic;
			border: config.$width_border_io solid transparent;
			padding: config.$padding_basic;
		}

		.a_button {
			@extend .button_io;
		}

		.group-input {
			display: flex;
			flex-flow: row nowrap;
		}

		.group-input-wrap {
			border: config.$width_border_io solid transparent;
			padding: config.$padding_basic;
			background-color: config.$color_back_io;

			& > input {
				margin: 0;
			}
		}

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

		select {
			@extend .io_select;
		}

		button {
			@extend .button_io;

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

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

		textarea {
			@extend .io_textarea;
		}
	}
}

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

table .io nav {
	@extend %flex-inline;
	flex-wrap: nowrap;
	align-items: stretch;

	button {
		margin: config.$margin_io;
	}
}