/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-block-no-redundant-longhand-properties */

.top-navbar {
	background-color: var(--navbar-background-color);
	border-bottom-width: 1px;
	border-color: var(--navbar-border-color);
	margin-bottom: 0.75rem;
	z-index: 10;
	top: 0;
	left: 0;
	position: sticky;

	.navbar-content {
		padding-left: 2rem;
		padding-right: 2rem;
		margin-left: auto;
		margin-right: auto;
		justify-content: space-between;
		height: 4rem;
		display: flex;

		.navbar-dropdown__button {
			display: none;
		}

		.navbar-left {
			display: flex;
			align-items: center;
			height: 4rem;
		}

		.brand {
			display: flex;
			flex-shrink: 0;
			border-bottom-width: 4px;
			padding-bottom: 0.5rem; /* 8px */
			border-color: var(--brand-border);

			a {
				color: rgb(255 255 255);
				font-weight: 700;
				text-decoration: none;
			}
		}
	}

	.navbar-right {
		align-items: center;
		background-color: var(--navbar-background-color);
		display: flex;
		flex-direction: row;
		left: 0;
		position: relative;
		top: 0;
		width: auto;

		.navbar-menu-button {
			display: none;
		}
	}

	.navbar-link {
		display: inline-flex;
		color: rgb(255 255 255);
		font-weight: 700;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		align-items: center;
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.navbar-search {
		max-width: 24rem;
		width: 100%;
		display: inline-flex;
		align-items: center;
		margin-left: 1.25rem;
		padding-block: var(--space-2);
	}

	.navbar-searchInput {
		background-color: var(--navbar-search-background-color);
		border-radius: var(--space-md) 0 0 var(--space-md);
		border: none;
		color: var(--navbar-search-color);
		line-height: 1.5;
		padding: 0.5rem;
		padding-left: 0.75rem;
		width: 100%;
		font-size: 1rem;
	}

	.navbar-searchBtn {
		background-color: var(--navbar-search-background-color);
		border: none;
		color: var(--navbar-search-color);
		line-height: 1.5;
		margin-right: 0.75rem;
		padding: 0.5rem 0.75rem;
		border-radius: 0 var(--space-md) var(--space-md) 0;
		font-size: 1rem;
	}

	.navbar-searchBtn svg {
		color: currentcolor !important;
	}

	#navbar-search-package-name {
		padding-left: 20px;
	}

	.navbar-themeBtn {
		display: inline-flex;
		flex-shrink: 0;
	}
}

@media (max-width: 48rem) {
	.top-navbar {
		.navbar-content {
			display: flex;
			padding-left: 1rem;
			padding-right: 1rem;
			height: auto;

			.navbar-right {
				display: none;
			}

			.navbar-left {
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				gap: var(--space-3);
				padding-block: var(--space-3);
				flex-grow: 1;
				height: auto;
			}

			.navbar-left .brand {
				justify-self: flex-start;
			}

			.navbar-search {
				grid-column: 1 / 3;
				grid-row: 2 / 3;
				max-width: initial;
				margin-left: 0;
				padding-bottom: 0;
			}

			.navbar-searchInput {
				max-width: unset;
				flex-grow: 1;
			}

			.navbar-searchBtn {
				margin-right: 0;
			}

			.navbar-dropdown {
				align-items: center;
				display: flex;
			}

			.navbar-dropdown__button {
				display: inline-flex;
				color: rgb(255 255 255);
				font-weight: 700;
				text-decoration: none;
				gap: .5ch;
				vertical-align: middle;
			}

			.navbar-dropdown__button::before {
				content: "☰" / "";
				font-size: 1.9cap;
				line-height: .9;
			}

			.navbar-dropdown__menu {
				position: fixed;
				box-sizing: content-box;
				background-color: var(--navbar-background-color);
				display: flex;
				flex-direction: column;
				left: 1rem;
				right: 1rem;
				top: 4rem;
				border: .0625rem solid var(--navbar-border-color);
				border-radius: var(--space-md);
				margin: 0;
				margin-left: auto;
			}

			.navbar-dropdown__menu:not(:popover-open) {
				display: none;
			}

			@supports not selector(:popover-open) {
				.navbar-dropdown__menu:not(.\:popover-open) {
				display: none;
			}
		}
		}
	}
}
