@import "/ui/styles/_theme.scss";

.form {
	flex-direction: column;
	gap: 12px;
}

.field {
	flex-direction: column;
	gap: 5px;

	.field-label {
		flex-direction: row;
		font-size: $fs-1;
		color: $text-faint;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		font-weight: 700;
		font-family: $font-mono;

		.val {
			margin-left: auto;
			color: $text;
			font-family: $font-mono;
			font-weight: 700;
			letter-spacing: 0;
			text-transform: none;
			font-size: $fs-2;
		}
	}

	input[type="text"], textarea, select {
		background-color: $bg-2;
		border: 1px solid $line-strong;
		color: $text;
		padding: 9px 11px;
		font-size: $fs-2;
		font-weight: 500;
		font-family: $font-secondary;
		transition: border-color 0.1s ease;

		&:hover { border-color: $accent; }
		&:focus { border-color: $accent; }
	}

	textarea { min-height: 80px; }

	input[type="range"] { height: 16px; }
}