src/components/Items.sass
.Items
	min-height: 0

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

.Item
	--height: calc(var(--input-height) * 1.3)
	position: relative
	display: block
	+size(100% var(--height))
	font-family: var(--font-code)
	line-height: 1.2
	color: var(--variant-z900)
	background-color: var(--variant-o100)
	border-radius: var(--border-radius)

	&.-disabled
		+disabledStripes(1em)

	&:is(button):hover
		background-color: var(--variant-o300)

	&:has(> .actions > :nth-child(1))
		--buttons: 1

		> .content
			--button-width: calc(var(--height) - 4px)
			--fade-start: calc(100% - (2px + (var(--button-width) * (var(--buttons) + 1.25))))
			--fade-end: calc(var(--fade-start) + var(--button-width))
			mask-image: linear-gradient(to right, white, white var(--fade-start), transparent var(--fade-end))

	&:has(> .actions > :nth-child(2))
		--buttons: 2

	&:has(> .actions > :nth-child(3))
		--buttons: 3

	> .content
		+absolute(0 _ _ 0)
		+size(100%)
		display: flex
		align-items: center
		gap: var(--spacing-half)
		padding: 0 var(--spacing-half)
		text-align: left

		> h1
			position: relative
			flex: 1 1 0
			margin: 0 var(--spacing-half) 0 0
			font-size: 1em
			min-width: 0

		> .profile-title
			display: none
			+absolute(0 _ _ var(--spacing-half))
			transform: translateY(-30%)
			padding: 0 1px
			font-size: max(0.9em, 10px)
			font-family: var(--font-text)
			font-weight: bold
			opacity: .8
			color: var(--variant-z100)
			background: var(--variant-z700)
			border-radius: var(--border-radius)
			+ellipsis()

			&:is(.Item:hover *)
				display: block

		> .badge
			flex: 0 0 auto
			display: flex
			align-items: center
			vertical-align: middle
			justify-content: center
			font-size: calc(var(--height) * 0.4)

		> .flair
			flex: 0 0 auto
			font-size: .9em
			font-family: var(--font-text)
			height: 2em
			line-height: 2em
			padding: 0 .3em
			border-radius: 4px
			border: 2px solid var(--bg)
			color: var(--variant-z900)
			background: var(--variant-z250)
			max-width: min(22%, 12em)
			+ellipsis()

		> .meta
			display: block
			margin: -.1em 0 0 0
			font-size: .95em
			opacity: .8
			word-spacing: -.3em
			+ellipsis()

			> .kind
				font-weight: bold

	> .actions
		+absolute(0 0 _ _)
		height: 100%
		display: flex
		align-items: stretch

		padding: 2px

		> button
			border-radius: var(--border-radius)
			display: flex
			align-items: center
			justify-content: center
			aspect-ratio: 1
			background: transparent

			&:last-child
				border-top-right-radius: calc(var(--border-radius) - 2px)
				border-bottom-right-radius: calc(var(--border-radius) - 2px)

			&:hover
				color: var(--variant-z500)
				background: var(--grey-z1000)
