src/components/Nav.sass
.Nav
	--height: calc(var(--input-height) * 1.3)
	--border-size: 2px
	--underline-size: 2px
	--tabs-size: 2px
	--tabs-color: var(--variant-z700)
	position: relative
	min-width: 0
	max-width: 100%
	height: var(--height)
	display: flex
	align-items: center
	justify-content: center
	overflow: hidden

	&.-underline
		justify-content: space-between

		> .NavLink
			flex: 0 1 auto

	&.-tabs
		--height: calc(var(--input-height) * 1.4)
		--gap: calc(var(--tabs-size) * 2)
		align-items: flex-start
		gap: 2px

		&:after
			content: ''
			+absolute(_ _ 0 0)
			+size(100% var(--tabs-size))
			background: var(--tabs-color)
			border-radius: var(--border-radius)

	&.-bar
		background: var(--variant-o200)
		border-radius: var(--border-radius)

	&.-left
		justify-content: flex-start

		> .NavLink
			justify-content: flex-start

	&.-right
		justify-content: flex-end

		> .NavLink
			justify-content: flex-end

	&.-left,
	&.-right
		> .NavLink
			flex: 0 1 auto

	> .NavLink
		flex: 1 1 auto

.NavLink
	--tag-color: var(--variant-z100)
	--tag-background: var(--variant-z800)
	position: relative
	z-index: 2
	min-width: 0
	max-width: 100%
	padding: 0 calc(var(--spacing-half) - var(--border-size, 0px))
	height: var(--height)
	color: var(--variant-z800)
	border: 0
	background: transparent
	outline-offset: -3px
	transition: all 33ms linear

	> :is(.content, .bold-reserve)
		display: flex
		align-items: center
		justify-content: center
		gap: .5em
		white-space: nowrap
		overflow: hidden

		> *
			flex: 0 0 auto

		> .relative
			flex: 0 1 auto
			overflow: hidden

			@media (--narrow)
				+visuallyHidden()

		span
			max-width: 100%

		.Icon
			+size(1.5em)

		.Tag
			--color: var(--tag-color)
			--background: var(--tag-background)

	> .bold-reserve
		font-weight: bold
		height: 0px
		color: transparent
		overflow: hidden
		visibility: hidden

	.Nav.-bar > &
		border: var(--border-size) solid transparent
		border-radius: var(--border-radius)

		&.-active
			font-weight: bold
			border-color: var(--variant)
			transition-duration: 0s

			&.-exact
				color: var(--grey-z0)
				border-color: var(--variant-z800)
				background: var(--tabs-color)
				border-color: transparent
				opacity: 1
				--tag-color: var(--tabs-color)
				--tag-background: var(--variant-z100)

		// Discrete border between buttons
		&:not(:first-child, .-active + *, .NavSpacer + *)::before
			content: ''
			+absolute(50% _ _ calc(var(--border-size, 0px) * -1))
			width: 1px
			height: 50%
			background: var(--grey-o300)
			transform: translateY(-50%)

	.Nav.-underline > &
		--border-opacity: 0
		--underline-width: 0%
		color: var(--variant)
		padding-bottom: calc(var(--underline-size) * 2)

		> .content
			font-weight: bold

		&:after
			content: ''
			display: block
			+absolute(_ _ 0 50%)
			+size(var(--underline-width) var(--underline-size))
			background: var(--variant-z900)
			opacity: var(--border-opacity)
			border-radius: 2px
			transform: translateX(-50%)
			transition: all 100ms linear

		&.-active
			color: var(--variant-z900)
			font-weight: bold
			--border-opacity: .5
			--underline-width: 100%

			&.-exact
				--border-opacity: 1

	.Nav.-tabs > &
		color: var(--variant)
		border-radius: var(--border-radius)
		transition: none

		&:not(.-active)
			height: calc(100% - var(--tabs-size) - 2px)
			color: var(--variant-z700)
			background: var(--variant-o200)

			> *
				position: relative
				z-index: 2

		&:last-child:before
			right: 0

		&.-active + *:before
			left: var(--gap)

		&.-active
			z-index: 3
			color: var(--variant-z200)
			background: var(--tabs-color)
			padding-bottom: var(--tabs-size)
			border: 0
			border-bottom-left-radius: 0
			border-bottom-right-radius: 0

			&::before,
			&::after
				content: ''
				position: absolute
				bottom: var(--tabs-size)
				+size(var(--border-radius))
				background: var(--tabs-color)

			&:not(:first-child)::before
				right: 100%
				mask-image: radial-gradient(farthest-side at 0% 0%, transparent calc(100% - 1px), black 100%)

			&:not(:last-child)::after
				left: 100%
				mask-image: radial-gradient(farthest-side at 100% 0%, transparent calc(100% - 1px), black 100%)

			&:first-child::before,
			&:last-child::after
				bottom: 0
				// removing 1px due to radial-gradient imprecision
				+size(calc(var(--border-radius) - 1px))
				background: var(--bg)

			&:first-child::before
				left: 0
				mask-image: radial-gradient(farthest-side at 100% 0%, transparent calc(100% - 1px), black 100%)

			&:last-child::after
				right: 0
				mask-image: radial-gradient(farthest-side at 0% 0%, transparent calc(100% - 1px), black 100%)

			> .content
				font-weight: bold

.NavSpacer
	flex: 10000 1 0
