@include comfortable {
	--editable-text-padding-inline: 4px;
	--editable-text-padding-block: 4px;
}

@include compact {
	--editable-text-padding-inline: 4px;
	--editable-text-padding-block: 1px;
}

editable-text {
	--min-visible-lines: 0;
	--max-visible-lines: 10;

	&[multiline] {
		--min-visible-lines: 5;
		--max-visible-lines: 20;
	}

	// Fun auto-sizing approach from CSSTricks:
	// https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
	
	display: grid;
	
	&::after {
		content: attr(value) ' ';
		visibility: hidden;
		margin: 1px;
	}
	
	&::after, .input {
		grid-area: 1 / 1 / 2 / 2;
		padding: var(--editable-text-padding-block) var(--editable-text-padding-inline);
		font: inherit;
		line-height: inherit;
		color: inherit;
		overflow-wrap: break-word;
		white-space: pre-wrap;
		max-height: calc(2ex * var(--max-visible-lines));
	}
	
	.input {
		// Necessary for consistent padding, even if it's actually an <input>
		-moz-default-appearance: textarea;
		
		min-height: calc(2ex * var(--min-visible-lines));
		margin: 0;
		
		&:read-only, &:not(:focus) {
			appearance: none;
			border: none;
			outline: none;
			background: transparent;
			margin: 1px;
		}
		
		&:hover:not(:read-only, :focus) {
			border-radius: 5px;
			border: 1px solid var(--fill-tertiary);
			box-shadow: 0 0 0 1px var(--fill-quinary);
			margin: 0;
		}
		
		::placeholder {
			color: var(--fill-tertiary);
		}
	}
}