src/components/Textarea.sass
.Textarea
	--rows: 1
	--min-height: 0
	position: relative
	display: inline-block
	max-width: 100%
	background: var(--darken)
	border-radius: var(--border-radius)
	border: 1px solid var(--variant-z300)
	$tran: 300ms linear
	transition: color $tran, background $tran

	&.-transparent
		background: transparent
		border: 0

	> textarea
		display: block
		width: 100%
		height: 100%
		min-height: 0
		max-height: 100%
		padding: .6em
		resize: none
		font-family: var(--font-code)
		tab-size: 2
		color: var(--variant-z900)
		background: transparent
		border: 0
		// To round the outline
		border-radius: 1px

		&:is(.-auto-resize > *)
			min-height: max(calc((var(--rows) * 1.5em) + 1em), min(var(--min-height), 50vh))
			field-sizing: content
			height: auto
			max-height: 50vh

		&::placeholder
			color: var(--muted)

		&:is(.-transparent > *)
			color: var(--variant-z700)

		&:not(.-focus-indicator > *)
			outline: 0

		&[disabled]
			filter: grayscale(50%)
			opacity: .5
			+disabledStripes()

	> .resize-handle
		--size: 10px
		+absolute(_ _ calc(var(--size) / -2) 0)
		width: 100%
		height: var(--size)
		cursor: ns-resize

		&:hover:after
			display: block
			content: ''
			+size(100% 4px)
			+absolute(calc(50% - 2px) _ _ 0)
			background: var(--variant-z400)
			border-radius: 2px

		&:is(:focus ~ *):after
			background: var(--variant-z600)
