.site-header-logo a:hover {
	text-decoration: none;
}

.site-header-logo {
	font-weight: bold;
}

.site-header-logo img {
	margin: 12px 6px;
}

.site-nav {
	margin-top: 12px;

	.page-link img {
		vertical-align: center;
	}
}

.page-content {
	padding: 0;
}

.site-header,
.site-footer {
	border-top: 0;
	border-bottom: 0;
}

.post-title {
	font-weight: 400;
	font-size: 32px;
}

.hidden {
	display: none;
}

button, .button {
	&.primary {
		background-color: $button-color;
		border: none;

		&:hover, &:focus {
			background-color: darken($button-color, 10%);
		}
		&:active {
			background-color: lighten($button-color, 5%);
		}
	}
	&.secondary {
		background-color: transparent;
		border: 2px solid $button-color;
		color: $text-color !important;

		&:hover, &:focus {
			background-color: darken($button-color, 10%);
			border-color: darken($button-color, 10%);
		}
		&:active {
			background-color: lighten($button-color, 5%);
			border-color: lighten($button-color, 5%);
		}
	}
	&.large {
		padding: 15px 32px;
		font-size: 20px;
		font-weight: 700;
	}
	&.warning {
		border: 2px solid $warning-color;

		&:hover, &:focus {
			background-color: darken($warning-color, 10%);
			border-color: darken($warning-color, 10%);
		}

		&:active {
			background-color: lighten($warning-color, 5%);
			border-color: lighten($warning-color, 5%);
		}
	}

	border-radius: 5px;
	color: white !important;
	text-decoration: none !important;
	padding: 5px 8px;
	text-align: center;
	display: inline-block;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

button {
	font-size: inherit;
	line-height: inherit;
}

.download {
	text-align: center;
}

.form-line {
	margin-bottom: 1rem;

	&>label {
		display: block;
	}
}

input, select {
	padding: 5px 12px;
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
	background-color: lighten($background-color, 4%);
	border: 1px solid $grey-color-very-dark;
	border-radius: 6px;
}

hr {
	margin: 24px 0;
	border: none;
	height: 1px;
	background-color: $grey-color-very-dark;
}

p {
	hyphens: auto;
}

.home {
	margin: 30px 0; /* like base layout */

	h1 {
		font-size: 32px; /* same as h2 */
	}

	.showcase {
		text-align: center;
	}

	@for $i from 2 through 3 {
		.row-#{$i} {
			display: grid;
			grid-template-columns: repeat(#{$i}, 1fr);
			gap: 24px;
		}
		@media screen and (max-width: #{$i * 250px}) {
			.row-#{$i} {
				grid-template-columns: 1fr;
			}
		}
	}

	.column {
		display: flex;
		flex-direction: column;
		flex: 1;

		section {
			padding-bottom: 12px;
		}

		.button-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

		.javadoc-selector {
			position: relative;
			margin-bottom: 6px;

			select {
				max-width: 100%; width: 100%;

				border: 2px solid $button-color;
				color: $text-color !important;
				padding: 8px 8px;
				text-align: center;
				display: inline-block;
				box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
				font-size: 16px;
				background-color: transparent;

				// Remove default styling, especially on Safari
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;

				option {
					background-color: $grey-color-very-dark;
				}
			}
		}

		.javadoc-selector::after {
			content: "▼";
			position: absolute;
			right: 1rem;
			top: 0.5rem;
			pointer-events: none; 
		}
	}

	img{
		border-radius: 5px;

		&.cover {
			object-fit: cover;
		}
	}
}

.download-api-container {
	display: flex;
	position: relative;

	@media (prefers-color-scheme: light) {
		img {
			filter: invert(1);
		}
	}

	> a {
		flex: 1;
		border-radius: 5px 0 0 5px;
	}

	.download-api {
		cursor: pointer;
		display: flex;
		flex-direction: column;

		.button {
			border-left: none;
			border-radius: 0 5px 5px 0;
		}

		&:focus-within .download-api-dropdown {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.download-api-dropdown {
			position: absolute;
			width: calc(100% - 2rem - 4px);
			background: $background-color;
			border: 2px solid $button-color;
			border-radius: 5px;
			top: calc(100% + 1rem); // Match gapping on the button row
			right: 0;
			display: flex;
			flex-direction: column;
			gap: .5rem;
			padding: 1rem;
			opacity: 0;
			visibility: hidden;
			transform: translateY(1rem);
			transition: visibility .25s ease-in-out,
			transform .25s ease-in-out,
			opacity .25s ease-in-out;

			a {
				display: flex;
				gap: .75rem;
				align-items: center;
			}
		}
	}
}