src/components/Tabs.sass
.Tabs
	--background: var(--grey-z50)
	--height: 2em
	position: relative
	display: flex
	gap: 2px
	max-width: 100%
	min-width: 0

	> .tabs
		flex: 0 1 auto
		position: relative
		max-width: 100%
		min-width: 0

		> .mover
			position: absolute
			z-index: 3
			top: 0
			height: 100%
			width: 40px
			min-width: 40px

			&:is([data-direction=start])
				left: 0

			&:is([data-direction=end])
				right: 0

		> .buttons
			+size(100%)
			position: relative
			display: flex
			overflow: hidden
			max-width: 100%
			min-width: 0
			gap: 2px

			> button
				max-width: 10em
				+ellipsis()
				border-radius: var(--border-radius)
				border: 1px dashed transparent

				&:is(.-dragTarget :hover)
					border-color: var(--muted)

				&:first-child
					border-top-left-radius: var(--border-radius)
					border-bottom-left-radius: var(--border-radius)

	> .controls
		flex: 1 0 auto
		display: flex
		gap: 2px

		> .spacer
			flex: 1 1 0
			height: 100%
			background: var(--grey-z200)
			opacity: .3

		> button
			display: flex
			align-items: center
			justify-content: center
			padding: 0
			+size(var(--height))

			&:not(.-active)
				background: var(--grey-z200)
				color: var(--muted)
				opacity: .7

			&:first-child
				border-top-right-radius: var(--border-radius)
				border-bottom-right-radius: var(--border-radius)

.TabsButton
	flex: 0 0 auto
	position: relative
	height: var(--height, 2em)
	padding: 0 var(--spacing-half)
	color: var(--grey-z800)
	background: var(--grey-z250)
	border-radius: var(--border-radius)
	outline-offset: -2px

	&.-active
		color: var(--grey-z100)
		background: var(--grey-z900)

	&.-dragged
		z-index: 3
		opacity: 0.8

.TabsListContextMenu
	> .closer
		+fixed(0 _ _ 0)
		z-index: var(--z-menu)
		+size(100vw 100vh)

	> .list
		--list-padding: var(--spacing-third)
		position: absolute
		z-index: calc(var(--z-menu) + 1)
		background: var(--background)
		border-radius: calc(var(--border-radius) + var(--list-padding))
		border: 1px solid var(--grey-z300)
		height: auto
		max-height: 60vh
		+elevate(24)

		> .mover
			position: absolute
			z-index: 3
			left: 0
			height: 30px
			width: 100%

			&:is([data-direction=start])
				top: 0

			&:is([data-direction=end])
				bottom: 0

		> .buttons
			--scrollbar-size: 3px
			padding: var(--list-padding)
			padding-right: subScrollbar(var(--list-padding))
			height: auto
			min-width: 10em
			max-height: 60vh

			&::-webkit-scrollbar
				width: var(--scrollbar-size)
				height: var(--scrollbar-size)

			> button
				display: flex
				align-items: center
				justify-content: center
				width: 100%

				> .title
					display: inline-block
					max-width: 40vw
					+ellipsis()

				&:not(.-active)
					background: var(--grey-z200)

				& + *
					margin-top: 2px

			> .activate
				display: flex
				justify-content: space-between

				> .delete
					display: flex
					align-items: center
					justify-content: center
					margin-right: calc(var(--spacing-half) * -1)
					padding: 0
					height: 100%
					aspect-ratio: 1
					background: transparent
					color: inherit

					&:not(:hover)
						opacity: .5

			> .add
				border: 1px dashed var(--grey)
				opacity: .3
