/* Imports */

@import url("reset.css"); /* Reset */
@import url("sortable.css"); /* Sortable tables */

/* Root */

:root {
	/* Fonts */
	--font-body: "Roboto Flex";
	--font-header: "Patua One";
	--font-code: "Source Code Pro";
	/* Other settings */
	font-size: 12px;
	box-sizing: border-box;
	scrollbar-width: thin;
}

/* Base layout */

body {
	display: grid;
	background: var(--body-background);
	font: normal 1.175rem/calc(1em + 0.5rem) var(--font-body);
	color: var(--text-color);
}

nav {
	position: sticky;
	top: 0;
	text-align: right;
	background: var(--body-background);
	z-index: 100;
	& menu {
		display: none;
		position: absolute;
		top: 4.5rem;
		left: 0;
		width: 100%;
		padding-left: 0;
		list-style: none;
		text-align: right;
		color: var(--white);
		box-shadow: 0 0 1em var(--body-background);
		& li {
			background: var(--nav-background);
			& a {
				display: block;
				padding: 1rem;
				color: var(--nav-links);
				border-bottom: 1px solid var(--body-background);
				transition: none;
				&:hover, &:active {
					background: var(--nav-links-hover);
					color: var(--white);
					& img {
						filter: invert(0);
					}
				}
				&.selected {
					font-weight: bold;
					background: var(--wrapper-background);
					&:hover {
						color: var(--links);
						& img {
							filter: invert(0.75);
						}
					}
				}
				& img {
					display: inline-block;
					height: 1.5em;
					width: auto;
					margin: 0 0.5ex -0.5ex 0;
					filter: invert(0.7);
				}
			}
		}
	}
	& button#menu_toggle {
		position: sticky;
		top: 0;
		padding: 1rem;
		color: var(--white);
		background: none;
		border: none;
		& span {
			vertical-align: bottom;
			font-size: 2rem;
			font-family: var(--font-header);
			&#show_menu {
				display: block;
			}
			&#close_menu {
				display: none;
			}
			& img {
				display: inline-block;
				margin: 0 0.5ex -0.75ex 0;
				height: 2.5rem;
				width: auto;
			}
		}
	}
	& button#menu_toggle {
		right: 0;
	}
}

#wrapper {
	width: 100%;
	padding: 5% 2.5%;
	background: var(--wrapper-background);
	border-bottom: var(--wrapper-border);
}

a {
	text-decoration: none;
	color: var(--links);
	border-bottom: 1px solid;
	transition: 0.25s ease color;
	&:hover {
		color: var(--text-color);
	}
}

footer {
	margin-bottom: 5%;
	padding: 2em 1em;
	font-size: 90%;
	text-align: center;
	color: var(--white);
}

/* Text */

h1, h2, h3, h4 {
	margin-bottom: 1em;
	border-bottom: 1px solid;
}

h1 {
	font: 200% var(--font-header);
	text-align: center;
	border-color: var(--header-background);
}

h2 {
	margin-top: 1em;
	font: 150% var(--font-header);
	border-color: hsla(36, 19%, 67%, 1);
}

h3, h4 {
	margin-top: 1em;
	border-color: hsla(38, 16%, 76%, 1);
}

p {
	text-align: justify;
	hyphens: auto;
	&  + p {
		margin-top: 1ex;
	}
}

ul {
	margin: 1ex 0;
	& li + li {
		margin-top: 1ex;
	}
}

/* Flexbox */

div.flex {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: baseline;
	width: 100%;
}

div#pairing {
	& div {
		flex-basis: calc(50% - 1ex);
		& select {
			width: 60%;
		}
		& + div {
			margin-left: 1ex;
		}
		&:first-of-type {
			text-align: right;
		}
		&:last-of-type {
			text-align: left;
		}
	}
}

div#foal_information {
	display: none;
}

div#scores {
	align-content: space-between;
	margin-bottom: 1em;
	text-align: left;
	& div {
		flex: 1 1 calc(100% / 4);
		margin-left: 1em;
		&:first-of-type {
			margin-left: 0;
		}
		&:last-of-type {
			flex-basis: 15%;
		}
	}
}

div#breeds {
	& div {
		flex: 1 1 50%;
		&#registration {
			& .note {
				margin-top: 1ex;
			}
		}
	}
	& p {
		margin-top: 0;
	}
}

div#skills {
	& div {
		flex-basis: 100%;
		& div {
			max-width: 100%;
			margin-bottom: 0.5ex;
			color: var(--white);
			background: var(--skills);
			& span {
				display: block;
				padding-right: 0.75ex;
				font-size: 95%;
				font-weight: bold;
				text-align: right;
				&.offset {
					position: relative;
					left: 1.25em;
					color: var(--text-color);
				}
			}
		}
		& + div {
			margin-top: 1em;
		}
		& p {
			font-weight: bold;
			& span {
				font-weight: normal;
			}
			&:last-of-type {
				display: inline-block;
			}
		}
	}
}

div#genes {
	flex-flow: row wrap;
	text-align: center;
	margin-bottom: 1em;
	font-size: 95%;
	& div {
		flex: 0 1 calc(100% / 4);
		margin: 0 -1px -1px 0;
		& div {
			padding: 0 0.5ex;
			letter-spacing: 1pt;
			background: var(--content-background);
			border: var(--content-border);
		}
		&.header {
			margin-top: 1em;
			padding: 0.5ex;
			font-weight: bold;
			letter-spacing: 0;
			background: var(--header-background);
		}
	}
	& div:nth-of-type(15) div + div,
	& div:nth-of-type(16) div + div,
	& div:nth-of-type(17) div + div,
	& div:nth-of-type(18) div + div,
	& div:nth-of-type(19) div + div {
		letter-spacing: 0;
	}
}

div#breeding_links {
	display: none;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: baseline;
	& div {
		display: none;
		flex: 0 0 50%;
		& p {
			text-align: left;
			font-weight: bold;
		}
	}
	& button {
		font-weight: normal;
		background: lightgrey;
		border: var(--wrapper-border);
	}
}

/* Tables */

table {
	width: 100%;
	border-spacing: 0;
	text-align: left;
	& th, td {
		padding: 0.25ex 1ex;
		&:first-of-type {
			width: 35ex;
		}
	}
	& th {
		vertical-align: bottom;
		font-weight: bold;
		background: var(--header-background);
	}
	& td, & th.normal-cell {
		font-weight: normal;
		text-align: left;
		vertical-align: middle;
		background: var(--content-background);
		border: var(--content-border);
	}
}

table.pedigree {
	font-size: 95%;
	& td {
		padding: 0;
		background: none;
		border: none;
		& input, & select {
			width: 100%;
			margin-left: 0;
		}
	}
	& td:nth-of-type(2n), & tr:nth-of-type(2n) td {
		padding-left: 1em;
	}
}

table.horse_list {
	margin-bottom: 1em;
	overflow: auto;
	& thead {
		& tr {
			& th {
				position: sticky;
				top: 4rem;
			}
		}
	}
	& tbody {
		& tr {
			& td {
				padding: 0.25ex 1ex;
				white-space: nowrap;
				& span + span::before {
					content: ", ";
				}
				&:first-of-type {
					position: sticky;
					left: 0;
				}
				& a {
					border-bottom: none;
				}
				& form {
					margin-top: 0;
				}
			}
			&:nth-of-type(even) th, &:nth-of-type(even) td {
				background: var(--content-background-alternate);
			}
			&:hover td, &:hover th.normal-cell {
				background: var(--table-hover);
				border-top: 1px solid var(--note-border);
				border-left: none;
				border-right: none;
				border-bottom: 1px solid var(--note-border);
				& a {
					color: var(--text-color);
				}
			}
		}
	}
	& input {
		font-size: 90%;
	}
	.id {
		width: 5em;
	}
	.modify {
		width: 4em;
		text-align: center;
	}
	.select {
		width: 2em;
		text-align: center;
	}
}

table#compare_all {
	& th:nth-of-type(2), & td:nth-of-type(2) {
		width: 5em;
	}
	& th:nth-of-type(3), & td:nth-of-type(3) {
		width: 0;
	}
	& span {
		width: auto;
		font-size: 85%;
		border: none;
	}
	& a {
		border-bottom: none;
	}
}

/* Forms */

form {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top: 1em;
	& fieldset {
		display: flex;
		flex-flow: row wrap;
		flex-basis: 100%;
		margin-bottom: 1em;
		padding: 2.5%;
		background: var(--content-background);
		border: var(--content-border);
		& legend {
			padding: 0.25ex 1ex;
			font-weight: bold;
			color: var(--white);
			background: var(--nav-links-hover);
			border: var(--content-border);
		}
		&#basic_information {
			& div {
				flex: 1 1 50%;
				margin-bottom: 1ex;
				& + div {
					padding-left: 1em;
				}
				& input[type=text], & input[type=number] {
					width: 100%;
				}
			}
		}
		&#untestable_genes {
			& div {
				flex: 0 1 calc(100% / 3);
				&:nth-of-type(5) {
					flex-basis: 50%;
				}
				&:nth-of-type(5), &:nth-of-type(6) {
					margin-top: 1ex;
				}
    		& select {
    			margin-left: 0.5ex;
	    		letter-spacing: 1pt;
    		}
			}
		}
		&#personality {
			align-content: baseline;
		}
		&#personality, &#conformation {
			& div {
				flex-basis: 50%;
			}
			& select {
				margin-right: 0.5ex;
			}
		}
		&#breed_percentages {
			& div {
				flex-basis: 100%;
				display: flex;
				align-items: baseline;
				margin-bottom: 0.5ex;
				& div {
					&:nth-of-type(odd) {
						flex: 0 0 12.5em;
					}
					&:nth-of-type(even) {
						flex: 0 0 5em;
						text-align: right;
					}
					& input[type="number"] {
						width: 5em;
					}
				}
				&#total {
					display: flex;
					flex-basis: 100%;
					margin-top: 0.5ex;
					padding: 1em 0 0;
					border-top: var(--content-border);
					& div {
						&:first-of-type {
							flex-basis: 12.5em;
							font-weight: bold;
						}
						&:last-of-type {
							flex-basis: 5em;
							text-align: right;
							& input {
								width: 5em;
							}
						}
					}
				}
			}
		}
		&#skills {
			& div {
				display: flex;
				flex-basis: 100%;
				align-items: baseline;
				margin-bottom: 0.5ex;
				& div {
					flex: 2 1 calc(100% / 3);
					&:nth-of-type(3n-2) {
						flex-basis: 8em;
					}
					&:nth-of-type(3n-1) {
						flex-basis: 65%;
					}
					&:nth-of-type(3n) {
						flex-basis: 6em;
						padding-left: 1ex;
					}
					& input + input {
						margin-left: 0.5ex;
					}
				}
			}
		}
		&#genes {
			& div {
				& div {
					flex: 0 1 25%;
					&:nth-of-type(odd) {
						font-weight: bold;
					}
				}
				select {
	    		letter-spacing: 1pt;
				}
			}
		}
		&#groups {
			& div {
				flex: 0 1 calc(100% / 2);
			}
		}
	}
	&#user_disciplines, &#user_breeds {
		& div {
			flex-basis: 50%;
		}
	}
	&#user_settings {
		& div {
			display: flex;
			flex-flow: row wrap;
			align-content: baseline;
			flex-basis: 100%;
			padding-bottom: 1em;
			& div {
				flex: 1 1 calc((100% / 4) - 1ex);
				padding-bottom: 0;
				&:first-of-type {
					flex: 1 1 80%;
				}
				&:nth-of-type(2) {
					flex: 0 0 5em;
					margin-left: 1ex;
				}
				&:nth-of-type(3) {
					flex: 0 0 4em;
					margin-left: 0;
				}
				&:nth-of-type(4) {
					padding-left: 1em;
				}
			}
			& input[type="text"], & input[type="number"] {
				width: 100%;
			}
			& input[type="checkbox"] {
				margin-right: 1ex;
			}
			& select {
				width: 7rem;
				margin-left: 1ex;
			}
			&.block {
				flex-basis: 100%;
			}
		}
	}
}

input, textarea, select {
	margin-bottom: 0.5ex;
	font-size: 90%;
	color: var(--content-text-color);
	background: var(--white);
	border: var(--content-border);
}

input {
	padding: 0.25ex 1ex;
	&[type="number"] {
		width: 4em;
	}
	&[type="radio"], &[type="checkbox"] {
		margin: 0 0.5ex;
		&:first-of-type {
			margin-left: 0;
		}
	}
	&[type="reset"], &.delete {
		font-weight: bold;
		color: var(--white);
		background: var(--alert) !important;
		&:hover {
			color: var(--body-text);
			background: var(--highlight) !important;
		}
	}
	&[type="submit"], &[type="reset"] {
		cursor: pointer;
	}
	&.invalid, &:invalid {
		border-color: var(--alert);
	}
	&:disabled, &:readonly {
		margin: 0;
		font-size: 90%;
		color: var(--content-text-color);
		background: darkgrey;
	}
}

input[type="submit"], .submit {
	font-weight: bold;
	color: white;
	&:enabled {
		background: var(--links);
		&:hover {
			background: var(--jackpot);
		}
	}
	&:disabled {
		background: darkgrey;
	}
}

select {
	padding: 0.5ex;
	&#sire_existing, &#dam_existing {
		font-weight: bold;
	}
}

button {
	&.copy_link {
		font-size: 90%;
		font-weight: bold;
	}
}

.account {
	& div {
		flex: 1 1 calc(100% / 3);
		& + div {
			padding-left: 1em;
			&:nth-of-type(4) {
				padding-left: 0;
			}
		}
		& input[type="text"], & input[type="password"] {
			width: 100%;
			margin-bottom: 1ex;
		}
		& label {
			font-weight: bold;
		}
	}
}

form#delete_horses {
	margin-top: 1ex;
	text-align: right;
}

/* Errors and alerts */

.required {
	padding: 0 0.5ex;
	font-weight: bold;
	color: var(--alert);
}

.error {
	font-size: 90%;
	color: var(--alert);
}

.warning {
	padding: 0.5ex 1ex;
	font-size: 90%;
	background: var(--highlight);
	border: 1px solid var(--highlight-border);
}

.float {
	position: relative;
	top: 1.5ex;
	margin-bottom: -4em;
}

.alert {
	color: var(--alert);
}

.minor-alert {
	background: var(--highlight);
}

.major-alert {
	background: #f0b5b5;
}

/* Scores */

#scores div {
	text-align: center;
	& p {
		margin-bottom: 1ex;
		font-weight: bold;
		text-align: center;
	}
}

.score {
	margin: 1ex;
	padding: 0.3ex 0.7ex;
	background: var(--content-background);
	border: var(--content-border);
}

.alert {
	font-weight: bold;
	color: var(--white);
	background: var(--alert);
	border: var(--alert-border);
}

.positive {
	font-weight: bold;
	background: var(--positive);
	border-color: var(--positive-border);
}

.jackpot {
	font-weight: bold;
	color: var(--white);
	background: var(--jackpot);
	border-color: var(--jackpot-border);
}

.good {
	margin-left: 0.5ex;
	padding: 0.25ex 1ex;
	font-weight: bold;
	color: var(--white);
	background: var(--positive);
	border: 1px solid var(--positive-border);
}

.bad {
	margin-left: 0.5ex;
	padding: 0.25ex 1ex;
	font-weight: bold;
	color: var(--white);
	background: var(--alert);
	border: 1px solid var(--alert-border);
}

.difference {
	font-size: 90%;
}

/* Misc */

.hidden {
	display: none;
}

.note {
	padding: 0.5ex 1ex;
	font-size: 90%;
	background: var(--notes);
	border: var(--content-border);
}

.centered {
	text-align: center;
}

p#status {
	margin-top: 1em;
	text-align: center;
	& img {
		filter: invert(0.75);
		display: inline-block;
		margin: 0 0.5ex -0.5ex 0;
		height: 1.5em;
	}
}

/* Animations */

.loading {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Resolution variations */
/* Common breakpoints: 20, 30, 40, 60, 64, and 80em */

@media screen and (max-width: 600px) {
	table.horse_list {
		& th:nth-of-type(4),
		& th:nth-of-type(5),
		& td:nth-of-type(4),
		& td:nth-of-type(5) {
			display: none;
		}
	}
}

@media screen and (min-width: 750px) {
	nav {
		& menu {
			top: 0;
			display: flex;
			flex-flow: row nowrap;
			border-bottom: border-bottom: var(--wrapper-border);
			background: var(--body-background);
			box-shadow: none;
			& li {
				flex: 2 1 auto;
				text-align: center;
				& a {
					border-right: var(--nav-border);
					&.selected {
						border-bottom: 1px solid var(--wrapper-background);
					}
				}
			}
		}
		button#menu_toggle {
			display: none;
		}
	}
	#wrapper {
		margin-top: calc(4rem - 1px);
		padding: 5%;
		border-top: var(--wrapper-border);
	}
	div#skills {
		& div {
			flex: 1 1 calc(100% / 3);
			& + div {
				margin-top: 0;
			}
		}
	}
	div#genes {
		& div {
			flex: 0 1 calc(100% / 8);
		}
	}
	form {
		fieldset {
			&#basic_information {
				div {
					flex-basis: 25%;
					&:nth-of-type(3) {
						flex-basis: 15%;
					}
					&:nth-of-type(4) {
						flex-basis: 10%;
					}
				}
			}
			&#untestable_genes {
				div {
					flex-basis: auto;
					&:nth-of-type(5) {
		    		padding-left: 1em;
						flex-basis: auto;
		    		border-left: var(--content-border);
					}
					&:nth-of-type(5), &:nth-of-type(6) {
						margin-top: -0.25ex;
					}
	    		& select {
	    			margin-left: 0.5ex;
	    		}
					& + div {
						margin-left: 1em;
					}
				}
			}
			&#personality, &#conformation {
				flex-basis: 50%;
				& select {
					width: 11.5em;
				}
			}
			&#personality {
				flex-basis: 40%;
				div {
					flex-basis: 100%;
				}
			}
			&#conformation {
				flex-basis: 59%;
				& div:nth-of-type(odd) {
					flex-basis: 40%;
				}
				& div:nth-of-type(even) {
					flex-basis: 60%;
				}
			}
			&#breed_percentages {
				& div {
					flex-basis: 50%;
				}
			}
	    &#skills {
        & div {
          & div {
            &:nth-of-type(3n-2) {
              flex-basis: 25%;
            }
            &:nth-of-type(3n-1) {
            	justify-content: center;
            	& input[type="number"] {
            		max-width: 10em;
            	}
            }
            &:nth-of-type(3n) {
            	flex-basis: 15%;
            }
          }
        }
      }
			&#groups {
				div {
					flex-basis: calc((100% / 4) - 1em);
					& + div {
						margin-left: 1em;
					}
					&:nth-of-type(4n+1) {
						margin-left: 0;
					}
				}
			}
			&#user_groups {
				& div {
					& div:first-of-type {
						flex-basis: 40%;
					}
					& div:nth-of-type(2), & div:nth-of-type(4) {
						margin-top: 1.5em;
					}
				}
			}
			&#user_disciplines, &#user_breeds {
				& div {
					flex-basis: 25%;
				}
			}
		}
	}
	div#breeding_links {
		& div {
			flex-basis: 25%;
	}
}

@media screen and (min-width: 1005px) {
	nav {
		& menu {
			width: 80%;
			left: 10%;
			& li:first-of-type {
				border-left: var(--wrapper-border);
			}
			& li:last-of-type {
				border-right: var(--wrapper-border);
			}
		}
	}
	#wrapper {
		width: 80%;
		margin: calc(4rem - 1px) auto 0;
		padding: 4% 5%;
		border: var(--wrapper-border);
	}
	form {
		fieldset {
			&#breed_percentages {
				flex: 0 0 33%;
				& div {
					padding-left: 0 !important;
					&:nth-of-type(odd) {
						flex-basis: 73%;
					}
				}
			}
			&#skills {
				flex: 0 0 65%;
				align-content: baseline;
			}
		}
		&#user_groups {
			& div {
				flex: 1 1 calc((100% / 2) - 1em);
				&:first-of-type {
					flex-basis: 66%;
				}
				&:nth-of-type(odd) {
					margin-left: 0;
					padding-right: 1em;
					border-right: var(--content-border);
				}
				& + div {
					margin-left: 1em;
				}
				& div {
					padding-right: 0 !important;
					border-right: none !important;
				}
			}
		}
	}
}

@media screen and (min-width: 1205px) {
	nav {
		& menu {
			width: 60%;
			left: 20%;
		}
	}
	#wrapper {
		width: 60%;
		padding: 5%;
	}
}