:root {
	font-family: "Geist", sans-serif;
	--surface-1: rgb(255, 255, 255);
}

.field_control {
	position: absolute;
	right: 0;
	width: 22px;
	height: 50%;
	background: transparent;
	border: none;
}

.field_control.is-increase {
	top: 0;
	transform: rotate(180deg);
}

.field_control.is-decrease {
	bottom: 0;
}

.field_control:before {
	position: absolute;
	top: 1px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	content: "";
	background: var(--surface-1);
	border-radius: 0 0 6px 6px;
}

:hover:is(.field_control:before) {
	background: var(--surface-ui-accent);
}

.field_control:after {
	position: absolute;
	top: 4px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	content: "";
	background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%206%206'%3e%3cpath%20fill='%23000'%20d='M.707%201.825%202.62%204.057a.5.5%200%200%200%20.76%200l1.913-2.232A.5.5%200%200%200%204.913%201H1.087a.5.5%200%200%200-.38.825Z'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
	.field_control:after {
		filter: invert(1);
	}
	:root {
		--surface-1: rgb(44, 42, 48);
	}
}

@font-face {
	font-family: "Martian Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/MartianMono.woff2") format("woff2");
}