src/components/AppNav.sass
.AppNav
	--link-bg: var(--bg-darker)
	flex: none
	display: flex
	position: relative
	background: var(--link-bg)
	box-shadow: inset 0 -1px 0 var(--darken)
	// titlebar-area-x is for macOS traffic lights
	padding: 0 0 0 env(titlebar-area-x, 0px)
	-webkit-user-select: none

	> .NavItem
		order: 3
		flex: 1 1 auto
		position: relative
		display: flex
		flex-direction: row
		justify-content: center
		height: 2.8rem
		min-width: 0
		padding: 0 .5em
		gap: .1em .4em
		align-items: center
		font-weight: 500
		color: var(--muted)
		border: 0
		cursor: default
		text-transform: uppercase
		white-space: nowrap
		border-radius: var(--border-radius)
		border-bottom-left-radius: 0
		border-bottom-right-radius: 0
		background: transparent
		transition: all 33ms linear

		&:not([data-os=mac] *):first-child
			border-top-left-radius: 0

		&:is([data-os=mac] *):last-child
			border-top-right-radius: 0

		@media (--narrow)
			height: 2.8rem

		&.-to-events
			margin-left: var(--spacing-half)

		&.-to-about-junction
			max-width: 5rem

			> .title
				display: none

			> .icon > .Icon
				color: inherit

		// Discrete border between buttons
		&:not(:first-child, .-active, .-active + *)::after
			content: ''
			+absolute(50% _ _ 0)
			width: 1px
			height: 40%
			background: var(--muted-100)
			transform: translateY(-50%)

		&.-active::before,
		&.-active::after
			content: ''
			position: absolute
			bottom: 0
			+size(6px)
			background: var(--bg)

		&.-active::before
			right: 100%
			clip-path: path('M 0 6 C 3 6 6 3 6 0 L 7 7')

		&.-active::after
			left: 100%
			clip-path: path('M 6 6 C 3 6 0 3 0 0 L -1 7')

		&:focus-visible
			outline-offset: -0.3rem

		&.-active
			color: var(--fg)
			opacity: 1
			box-shadow: 0 1px 0 0 var(--bg)
			--link-bg: var(--bg)
			background: var(--bg)

		> .icon,
		> .title
			position: relative
			z-index: 2

		> .icon
			flex: 0 0 auto
			display: inline-block
			+size(1.7em)

			> .Icon
				+size(100%)

			> .count
				+absolute(_ _ 45% 55%)
				font-size: .8em
				padding: .1em .3em
				line-height: 1
				box-shadow: 0 0 0 3px var(--link-bg)
				z-index: 2
				transition: all 33ms linear

			> .indicator
				+absolute(_ _ 65% 70%)
				box-shadow: 0 0 0 3px var(--link-bg)
				z-index: 2
				transition: all 33ms linear
				+size(.5rem)
				border-radius: 50%
				background: var(--variant-z700)

		> .title
			flex: 0 1 auto
			+ellipsis()
			font-size: .8em
			font-weight: bold

		@media (width < 450px)
			> .title
				display: none

		@media (width >= 450px) and (width < 540px)
			&:is([data-uimode="compact"] *)
				> .title
					display: none

			&:not([data-uimode="compact"] *)
				height: 3.8em
				display: flex
				flex-direction: column
				justify-content: center

				& > .title
					display: block

.WindowControl
	padding: 0
	background-color: transparent

	&:not([data-os=mac] *)
		order: 4
		--color: var(--grey-z600)
		--hover-color: var(--grey-z600)
		--hover-bg: var(--grey-o200)
		--size: calc(2.8rem - 4px)
		margin-top: 2px
		+size(var(--size))
		border-radius: 2px
		border-radius: var(--border-radius)

		&:hover
			--color: var(--hover-color)
			background-color: var(--hover-bg)

		&.-minimize
			display: flex
			align-items: center
			justify-content: center
			margin-left: 2px

			&:is([data-uimode=compact] .-active + *)
				border-bottom-left-radius: 5px

			&:after
				content: ''
				display: block
				width: 10px
				height: 1px
				background: var(--color)

		&.-close
			--hover-color: #fff
			--hover-bg: #e81123
			position: relative
			margin-right: 2px

			&:before,
			&:after
				content: ''
				display: block
				position: absolute
				top: 50%
				left: 50%
				width: 14px
				height: 1px
				background: var(--color)

			&:before
				transform: translate(-50%, -50%) rotate(45deg)

			&:after
				transform: translate(-50%, -50%) rotate(-45deg)

	&:is([data-os=mac] *)
		align-self: flex-start
		padding: 12px 4px

		&::after
			content: ''
			display: block
			+size(12px)
			border-radius: 50%
			background: #4a4a4a

		&.-minimize
			order: 2
			padding-right: 8px
			margin-right: 2px

			&:hover::after
				background: #15cb38

		&.-close
			order: 1
			padding-left: 8px

			&:hover::after
				background: #ff6052
