/* 4. Base: Unclassed HTML elements. H1-H6, basic links, lists, etc. Last layer we see type selectors (e.g. a { }, blockqoute { }).  */

/* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list */

/* Embedded content */

img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle; /* to remove space at the bottom */
}

iframe {

}

embed {

}

object {

}

param {

}

video {

}

audio {

}

source {

}

track {

}

canvas {

}

map {

}

area {

}

svg {
	vertical-align: middle; /* to remove space at the bottom */
}

math {

}

/* Tabular data */

table {
	margin-top: 0;
	margin-bottom: .5em;
	border-collapse: collapse;
	font-size: var(--font-size-standard);
}

caption {

}

colgroup {

}

col {

}

tbody {

}

thead {

}

tfoot {

}

tr {

}

td {
	padding: var(--table-padding);
	border-width: var(--table-border-width-horizontal) var(--table-border-width-vertical);
	border-style: var(--table-border-style);
	border-color: var(--table-border-color);
}

th {
	padding: var(--table-padding);
	border-width: var(--table-border-width-horizontal) var(--table-border-width-vertical);
	border-style: var(--table-border-style);
	border-color: var(--table-border-color);
	color: var(--table-head-color);
	background-color: var(--table-head-background-color);
	text-align: left;
}

 /* Forms */

form {
	& > fieldset > div, &  > div {
		margin-bottom: var(--form-margin-bottom);
	}
}

fieldset {
	margin: 0;
	margin-bottom: var(--form-margin-bottom);
  border: var(--form-fieldset-border);
}

legend {
	color: var(--form-legend-color);
}

label {
	display: block;
  //margin: var(--form-label-margin);
}

input, select, textarea {
	display: block;
  vertical-align: middle;
  font-family: var(--form-font);
  font-size: var(--form-font-size);
  padding: var(--form-padding);
  border: var(--form-border);
  border-radius: var(--form-border-radius);
  width: var(--form-width);
  height: var(--form-height);
  max-width: 100%;
  background-color: var(--form-background-color);
}

input[type="search"] {
	-webkit-appearance: none;
}

input[type="file"], input[type="radio"], input[type="checkbox"] {
	width: auto;
	height: auto;
	padding: 0;
	border: none;
}

input[type="radio"], input[type="checkbox"] {
	display: inline-block;
	& + label {
		display: inline-block;
	}
}

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

input:focus {
	outline: 0;
	border-color: var(--form-focus-border-color);
}

input[type="radio"]:focus, input[type="checkbox"]:focus {
	outline: var(--form-focus-special-outline);
}

input:focus:invalid {
	color: var(--form-invalid-color);
	border-color: var(--form-invalid-border-color);
}

input[type="file"]:focus:invalid:focus, input[type="radio"]:focus:invalid:focus, input[type="checkbox"]:focus:invalid:focus {
	outline: var(--form-invalid-special-outline);
}

input[disabled] {
	cursor: not-allowed;
	background-color: var(--form-disabled-background-color);
	color: var(--form-disabled-color);
}

input[readonly] {
	background-color: var(--form-readonly-background-color);
	color: var(--form-readonly-color);
	border-color: var(--form-readonly-border-color);
}

button, input[type="button"], input[type="submit"], input[type="reset"] {
	-webkit-appearance: none;
	font-family: var(--button-font);
  font-size: var(--button-font-size);
	text-transform: var(--button-text-transform);
  padding: var(--button-padding);
  color: var(--button-color);
  background-color: var(--button-background-color); transition: background-color var(--transition-duration);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  cursor: pointer;
	width: var(--button-width);
	height: var(--button-height);
	max-width: 100%;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
	background-color: var(--button-hover-background-color);
}

button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
	outline: 0;
}

button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
	position: relative;
	top: 1px;
}

button[disabled], input[type="button"][disabled], input[type="submit"][disabled], input[type="reset"][disabled] {
	background-color: var(--button-disabled-background-color);
	cursor: not-allowed;
}

select {
	
}

select[multiple] {
	height: auto;
}

datalist {

}

optgroup {

}

option {

}

textarea {
	height: auto;
}

keygen {

}

output {

}

progress {

}

meter {

}

/* Interactive elements */

details {

}

summary {

}

menuitem {

}

menu {

}