nav {
	border-bottom: 1.5px solid $bt-light-border-grey;

	.navbar-brand {
		padding: 4px 8px; // just enough top down padding to not increase navbar height

		@include touch {
			padding: 0;
		}
	}

	.nav-link {
		color: $bt-base-text !important;

		&.is-new {
			position: relative;
			&::after {
				content: 'New!';
				display: inline-block;
				text-transform: uppercase;
				font-size: 8px;
				font-weight: 600;
				color: $bt-white;
				background: $bt-primary;
				padding: 2px 4px;
				border-radius: 2px;
				line-height: 1;

				margin-left: 4px;
				transform: translateY(-2px);
			}
		}
	}

	// log in button
	.navbar-nav .bt-btn {
		@extend .bt-bold;
		font-size: 1rem;
		width: fit-content;
	}

	// don't change color on hover when collapsed
	@include desktop {
		.navbar-brand,
		.navbar-nav .nav-link {
			transition: 0.2s;
			border-radius: 6px;

			&:hover {
				background-color: $bt-button-background;
				color: $bt-primary !important;

				@include touch {
					background: none;
					color: $bt-base-text;
				}
			}
		}

		// log in button
		.navbar-nav .bt-btn {
			margin-left: 0.5rem;
		}
	}
}
