// Form basics
// -----------------------------------------------------------------------------

form {

}

fieldset {
	margin: $high_margin;
	padding: $basic_space;
	border: $basic_border;
}

legend {
	@extend %basic;
	padding: 0 $half_space;
}



// Common
// -----------------------------------------------------------------------------
input, button, textarea {
	margin: $io_margin;

	&[disabled="disabled"],
	&[disabled] {
		cursor: not-allowed;
	}
}

label {
	@extend %basic;

	input {
		margin-left: $basic_space;
	}
}

input {
	color: $basic_io_font_color;

	&[disabled="disabled"],
	&[disabled] {
		cursor: not-allowed;
	}
}

@each $input in $basic_input_list, textarea {
	#{$input} {
		@extend %basic_mono;
		border: $basic_io_border;
		padding: $half_space;
		background-color: $basic_io_back_color;

		&:hover {
			background-color: $basic_highlight_color;
		}

		&[readonly="readonly"],
		&[readonly] {
			border-color: darken($basic_io_border_color, 30%);
			background-color: darken($basic_io_back_color, 30%);
		}

		&[disabled="disabled"],
		&[disabled] {
			border-color: transparent;
		}
	}
}

@each $input in $basic_input_list {

	#{$input} {
		line-height: 1;
	}
}

@each $input in $basic_button_list {
	#{$input} {
		padding: $basic_padding;
	}
}

label + input,
.input__label_right {
	margin: 0 $basic_space;
}

.label__table {
	display: table;

	input {
		display: table-cell;
	}
}



.input__default {

	label {
		@extend .label__table;
		margin: $half_space 0;

		input {
			padding: $half_space ($half_space + 1);
			border-style: solid;
			border-color: transparent;
			background-color: $basic_io_back_color;
			color: $basic_io_font_color;

			&:hover {
				background-color: $darkest_color;
				color: $brightest_color;
			}
		}
	}
}



// More
// -----------------------------------------------------------------------------

textarea {

}

button {

}

select {

}

datalist {

}

optgroup {

}

option {

}

output {

}

progress {

}

meter {

}



// Interactive elements
// -----------------------------------------------------------------------------

details {

}

summary {

}

menu {

}

menuitem {

}

dialog {

}



// Canvas
// -----------------------------------------------------------------------------

canvas {

}