/* Page Toolbar */
#page-toolbar {
	position: sticky;
	top: 0;
	right: 0;
	left: 0;
	background-color: $bg-secondary;
	z-index: 100;

	// disable sticky if landscape on mobile
	@media (max-width: 600px) and (orientation: landscape) {
		position: static;
	}
	@media (max-width: 799px) {
		.wrapper {
			float: left;
			width: 100%;
			overflow-x: visible;
		}
		p {
			display: inline-flex;
			margin-right: 18px;
			margin-left: 8px;
			font-size: 13px;
		}
	}
	.inside:empty {
		display: none;
	}
	.page-nav-label {
		margin-right: .5em;
		margin-bottom: .75em;
		@include title-font();
		color: $white;
		font-size: 1.125rem;
		text-transform: uppercase;

		@media (max-width: 799px) {
			position: relative;
			top: 2px;
			margin-bottom: 0;
			padding: .25em calc(24px + .5em) .25em .5em;
			border: 2px solid $border-subtle;
			font-size: 1.2rem;
			cursor: pointer;

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				width: 24px;
				height: 100%;
				background: $accent-primary svg-load("../.build/svgmin/arrowhead-dropdown.svg") center no-repeat;
				background-size: 60%;
				content: "";
			}
		}
	}
	p {
		input + input {
			margin-right: 2em;
			margin-left: .2em;
			font-size: 1.25rem;
		}
		@media (max-width: 420px) {
			input + input {
				margin-top: .5em;
				margin-right: 2em;
			}
		}
		@media only screen and (min-width: 800px) and (max-width: 1024px) {
			.button, input[type="submit"] {
				font-size: 1.1rem;
			}
		}
		@media only screen and (min-width: 1025px) {
			p {
				margin-top: .5em;
				.button, input[type="submit"] {
					font-size: 1.25rem;
				}
			}
		}
	}
	.page-actions {
		float: right;

		@media (min-width: 800px) {
			width: 25%;
			padding-top: .5em;
			padding-left: 25px;
		}
	}

	.page-nav {
		position: relative;
		float: left;
		width: auto;
		z-index: 1;

		> ul {
			margin: 0;
			padding: 0;
			list-style: none;
			text-align: left;
			text-transform: uppercase;

			li {
				display: inline-block;
				margin-bottom: 0;
				padding: .25em .75em 0;
				@include title-font();
				font-size: 1.375rem;

				@media (max-width: 799px) {
					display: block;
					padding: 0 .5em;
				}
				@media (min-width: 800px) {
					&:first-child {
						padding-left: 0;
					}
				}
			}
			a {
				font-weight: normal;

				&:hover {
					color: $white;
				}
				@media (max-width: 799px) {
					display: block;
					padding: .15em 0;
					line-height: 1;
				}
			}
		}
	}

	// Mobile menu
	@media (max-width: 799px) {
		.page-nav > ul, .filter-facets {
			position: absolute;
			display: none;
			padding: .5em;
			border: 2px solid $border-subtle;
			background-color: $bg-secondary;
			z-index: 2;
			&.expanded {
				display: block;
			}
		}
		.page-nav > ul {
			padding: .5em 0;
		}
	}

	@media (min-width: 800px) {
		.filter-facets {
			position: relative;
		}
	}
	fieldset {
		position: relative;
		display: inline-block;
		margin-top: .1em;
		margin-bottom: .1em;
		padding: 0;
		border: 0 none;
		background: transparent;
		font-size: .75rem;
		@media only screen and (min-width: 800px) and (max-width: 1024px) {
			legend {
				border: 1px solid #154d5f;
				font-size: 11px;
			}
		}
		@media (min-width: 1025px) {
			legend {
				border: 2px solid $border-subtle;
				font-size: 1em;
			}
		}
		legend {
			width: auto;
			margin: 0 .15em 0 0;
			padding: .02em .3em 0;
			@include body-font();
			background: transparent;
			line-height: 1.5;
			cursor: pointer;
			&:hover {
				color: $white;
			}
		}
		// Active state when an option is selected
		&.option-selected {
			legend {
				border-color: $white;
				color: $bg-well;
				background-color: $white;
				&:hover {
					color: $bg-well;
				}
			}
		}
		&:hover > .facet-options {
			display: block;
		}

		label {
			display: inline-block;
			float: none;
			margin: 0;
			padding: .25em .4em;
			color: $white;
			font-size: 1em;
			line-height: 1;
			vertical-align: middle;
			cursor: pointer;
		}
	}
	@media (max-width: 799px) {
		.filter-facets > fieldset {
			display: block;
		}
		fieldset.filter-facets .facet-options {
			margin-top: .5em;
		}
	}

	.facet-options {
		position: absolute;
		top: 1.25rem;
		display: none;
		width: 150px;
		padding: .25em 0;
		border: 2px solid $border-subtle;
		background-color: $bg-secondary;
		overflow: auto;
		z-index: 3;

		&.expanded {
			display: block;
		}
		li {
			display: block;
			margin-bottom: 0;
			padding-left: 0;
		}
		// Always hide these native controls
		input[type="checkbox"],
		input[type="radio"] {
			position: absolute;
			left: -9999px;
		}
		input:checked + label {
			color: $accent-primary;
			&::before {
				display: inline-block;
				width: 1em;
				height: 1em;
				margin-right: 5px;
				background: svg-load("../.build/svgmin/checkmark.svg");
				background-size: contain;
				content: "";
			}
		}
		input[type=radio]:checked + label::before {
			border-radius: .5em;
		}
		input:focus + label {
			outline: 2px solid Highlight;
			outline: 5px auto -webkit-focus-ring-color;
			outline-offset: -5px;
		}
		label {
			&:hover {
				color: $accent-primary;
			}
		}
	}
}