src/components/Outputs.sass
.Outputs
	--z-index: calc(var(--z-queue-bar) - 10)
	--spacing-h: 0
	position: relative
	z-index: var(--z-index)
	height: calc(var(--height, 0.3) * 100%)
	display: flex
	flex-direction: column

	&:not(.-dragged)
		transition: all 300ms $out-expo

	> .tease
		+absolute(_ _ 6px 50%)
		transform: translateX(-50%)
		z-index: calc(var(--z-index) - 1)
		--bg-color: var(--grey-z200)
		cursor: ns-resize
		display: flex
		align-items: center
		gap: 0.16em
		font-size: max(10px, calc(1rem - 1px))
		line-height: 1.2
		padding: .2em .4em
		border-radius: var(--border-radius)
		background: var(--bg-color)
		box-shadow: 0 0 20px var(--bg),  0 0 2px 1px var(--bg)

		.Icon
			+relative(2px _ _ _)

	> .content
		flex: 1
		position: relative
		z-index: calc(var(--z-index))
		display: flex
		flex-direction: column
		background: var(--bg)

		> .controls
			--input-height: 2em
			flex: 0 0 auto
			position: relative
			display: flex
			align-items: center
			gap: 2px
			justify-content: space-between
			margin: 0 var(--spacing-h)

			> .spacer
				height: 100%
				flex: 1 1
				border-radius: var(--border-radius)
				background: var(--grey-o100)
				cursor: ns-resize

			> .handle
				+absolute(-10px _ _ 0)
				+size(100% 10px)
				cursor: ns-resize

				&::after
					content: ''
					+absolute(_ _ 4px 0)
					+size(100% 2px)
					border-radius: 999px
					background: var(--grey)
					opacity: 0
					transition: opacity 0 linear

				&:is(:hover, .-force-show-drag-handle *)::after
					opacity: 1
					transition-duration: 300ms
					transition-delay: 100ms

			> .Select
				--gap: 2px

				.SelectOption:not(.-selected)
					background: var(--grey-o100)

				.name
					+ellipsis()

		> .Items
			position: relative
			flex: 1 1 0
			margin: var(--spacing-quarter) 0
			+hSpacingScrollable(var(--spacing-h))

			> .Item + .Item
				margin-top: 2px
