@import url(color);

input-field {
	--border-width: max(2px, 0.1em);
	--selection-offset: 0.2em;

	display: flex;
	align-items: center;
	height: 2em;
	min-width: fit-content;
	padding: 0 0.25em 0 0.5em;
	
	box-sizing: border-box;
	user-select: none;

	color: var(--color-foreground);
	background-color: var(--color-background);

	border: var(--border-width) solid var(--color-foreground);
	border-radius: 0.2em;
}
input-field * {
	font-size: inherit;
}

input-field ::selection {
	color: transparent;
	text-shadow: 0 calc(0em - var(--selection-offset)) 0 var(--color-foreground);
}

input-field > name {
	font-size: calc(1em + var(--selection-offset));
	font-weight: bold;
}
input-field > :where(input, #input) {
	width: 100%;
	
	margin: 0;
	padding: calc(var(--selection-offset) / 2) 0.25em 0 0.5em;
	
	color: var(--color-foreground);
	background-color: var(--color-background);
	
	font: inherit;
	resize: none;
	background: none;
	appearance: none;
	border: none;
}
input-field > name:empty + :where(input, #input),
input-field > :where(input, #input):first-child {
  padding: 0 0.25em 0 0;
}

input-field:focus-within > name {
	color: var(--color-primary);
}
input-field:focus-within :where(input, #input):focus {
	outline: none;
}

input-field > actions {
	display: flex;
	flex-direction: row;	
	gap: 0.25em;
}
input-field > actions:not(:empty) {
	margin-left: 0.25em;
}
input-field > actions > :where(.action, #action, [action]) {
	height: fit-content;
	cursor: pointer;
	border: none;
}
input-field > actions > [action=clear] {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.5em;
	width: 1.5em;
	background: none;
}
input-field > actions > [action=clear]::before,
input-field > actions > [action=clear]::after {
	content: '';
	background-color: var(--color-error);
	position: absolute;
	height: 1.5em;
	width: 0.2em;
}
input-field > actions > [action=clear]::before {
	transform: rotate(45deg);
}
input-field > actions > [action=clear]::after	{
	transform: rotate(-45deg);
}

input-field > #input:empty + actions > [action=clear],
input-field > input[placeholder]:placeholder-shown + actions > [action=clear],
input-field:not(:focus-within) > input:not([placeholder]) + actions > [action=clear] {
	display: none!important;
}