fieldset {
	background-color: var(--col-bg2);
	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
	border-color: var(--col-bg3);
	border-style: solid;

	:is(input:not(:is([type="button"], [type="submit"], [type="reset"])), textarea, select) {
		background-color: color-mix(in lch, var(--col-bg2) 95%, var(--col-fg));
		border-color: var(--col-fg2);
	}
}

input:not(:is([type="button"], [type="submit"], [type="reset"])),
textarea,
select {
	padding: 0.1rem 1ch;
	color: var(--col-fg);
	background-color: var(--col-bg2);
	border: 0.125rem solid var(--col-fg2);
	--br-tl: var(--border-radius);
	--br-tr: var(--border-radius);
	--br-bl: var(--border-radius);
	--br-br: var(--border-radius);
	border-radius: var(--br-tl) var(--br-tr) var(--br-br) var(--br-bl);

	&:user-invalid {
		border-color: var(--col-accent);
	}
}

textarea {
	max-width: 100%;
}

select {
	-webkit-appearance: none;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20height%3D%2740%27%20width%3D%27100%27%20fill%3D%22%23888%22%3E%3Cpolygon%20points%3D%220%2C0%2050%2C40%20100%2C0%22%2F%3E%3C%2Fsvg%3E")
		calc(100% - 0.8rem) 50%/0.8rem no-repeat;
	padding-right: 2rem;
}