{#if !textarea} dispatch("textFocused")} on:blur={() => dispatch("textChanged")} on:change={() => dispatch("textChanged")} on:keydown={(e) => e.key === "Enter" && dispatch("textChanged")} on:keydown={(e) => e.key === "Escape" && cancel()} on:pointerdown on:contextmenu={(e) => hideContextMenu && e.preventDefault()} data-input-element /> {:else}

dispatch("textFocused")}
			on:blur={() => dispatch("textChanged")}
			on:change={() => dispatch("textChanged")}
			on:keydown={(e) => (macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter" && dispatch("textChanged")}
			on:keydown={(e) => e.key === "Escape" && cancel()}
			on:pointerdown
			on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
		/>
	{/if}
	{#if label}
		<label for={`field-input-${id}`} on:pointerdown>{label}</label>
	{/if}
	<slot />
</LayoutRow>

label {
			flex: 0 0 auto;
			line-height: 18px;
			padding: 3px 0;
			padding-right: 4px;
			margin-left: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

&:not(.disabled) label {
			cursor: text;
		}

input,
		textarea {
			flex: 1 1 100%;
			width: 0;
			min-width: 30px;
			height: 18px;
			line-height: 18px;
			margin: 0 8px;
			padding: 3px 0;
			outline: none; // Ok for input/textarea element
			border: none;
			background: none;
			color: var(--color-e-nearwhite);
			caret-color: var(--color-e-nearwhite);
			unicode-bidi: plaintext;

&::selection {
				background-color: var(--color-4-dimgray);

// Target only Safari
				@supports (background: -webkit-named-image(i)) {
					& {
						// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
						// https://stackoverflow.com/a/71753552/775283
						background-color: rgba(var(--color-4-dimgray-rgb), calc(254 / 255));
					}
				}
			}
		}

input {
			&:not(:focus).has-label {
				text-align: right;
				margin-left: 0;
				margin-right: 8px;
			}

&:focus {
				text-align: left;

& + label {
					display: none;
				}
			}
		}

textarea {
			min-height: calc(18px * 3);
			margin: 3px;
			padding: 0 5px;
			box-sizing: border-box;
			resize: vertical;
		}

&.disabled {
			background: var(--color-2-mildblack);

label,
			input,
			textarea {
				color: var(--color-8-uppergray);
			}

input {
				// Disables drag-selecting the text, since `user-select: none` doesn't work for input elements
				pointer-events: none;
			}
		}
	}
</style>