// Global top navigation bar (brand + tier badge + theme toggle).
// Shared across every BetterLinks admin screen via <AppNavbar />.
.bl-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 8px 30px;
	// Break out of the .betterlinks-body padding (top/right 20px) and the WP
	// admin #wpcontent left padding (20px) so the bar is full-bleed, while the
	// page content below keeps its normal margins.
	margin: -20px -20px 16px -20px;
	border: none;
	border-bottom: 1px solid $light-darken;
	background-color: $white;
	border-radius: 0;

	&__brand {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	&__logo {
		display: inline-block;
		height: 26px;
		width: auto;
	}

	&__title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1;
		color: $dark;
	}

	&__badge {
		display: inline-flex;
		align-items: center;
		height: 22px;
		padding: 0 10px;
		border-radius: 50px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;

		&.is-free {
			color: $secondary;
			background-color: $light;
			border: 1px solid $light-darken;
		}

		&.is-pro {
			color: $white;
			background-image: linear-gradient(202deg, #2961ff 0%, #003be2 100%);
		}
	}

	// Theme toggle — mirrors the segmented control styling from _topbar.scss.
	.theme-mood-button {
		height: 40px;
		border: 1px solid $light-darken;
		border-radius: 50px;
		cursor: pointer;

		input {
			display: none;
		}

		.theme-mood {
			display: flex;
			align-items: center;
			height: 100%;
			margin: 0 5px;
			position: relative;
			border-radius: 50px;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30px;
				width: 40px;
				border-radius: 50px;
			}
		}

		input:not(:checked) + .theme-mood .icon {
			&:first-child {
				color: $white;
				background-image: linear-gradient(202deg, #2961ff 0%, #003be2 100%);
			}
			&:last-child {
				color: $secondary;
			}
		}

		input:checked + .theme-mood .icon {
			&:first-child {
				color: #738bb8;
			}
			&:last-child {
				color: $white;
				background-image: linear-gradient(202deg, #2961ff 0%, #003be2 100%);
			}
		}
	}
}