.input-field {
	width: 100%;
	display: block;
	background: var(--c-bg-2);
	color: var(--c-fg-1);
	border-radius: var(--sp-1);
}

.input-field input {
	width: 100%;
	height: 2em;
	font-size: medium;
	margin: 0;
	padding: var(--sp-1);
	border: none;
	background: var(--c-bg-2);
	color: inherit;
	border-radius: var(--sp-1);
}

.input-field.icon {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;

	svg {
		padding: var(--sp-1);
		display: inline-block;
		height: 100%;
		width: auto;
	}

	&:has(:focus) {
		outline-width: 2px;
		outline-style: solid;
		outline-color: var(--c-primary);

		input {
			outline: none;
		}
	}
}