form:not([class]) {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

form label {
	margin-top: 0.5rem;

	&:first-of-type {
		margin-top: 0;
	}
}

input,
textarea {
	caret-color: var(--app-primary);
}

input[type="text"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
textarea:not([class]) {
	background: var(--surface-1);
	width: 100%;
	padding: 0.5rem;
	border: 1px solid hsla(0, 100%, 0%, 0.2);
	border-radius: 0.5rem;

	@media (prefers-color-scheme:dark) {
		border: 1px solid hsla(0, 0%, 100%, 0.2);
	}
}

input[type="checkbox"]:not([class]) {
	accent-color: var(--text-1);
	width: 1rem;
	height: 1rem;
}


label.checkbox-toggle {
	/* Default label styles */
	flex-shrink: 0;

	img {
		flex-shrink: 0;
	}
}

label.checkbox-toggle {
	input[type="checkbox"] {
		position: absolute;
		clip: rect(0, 0, 0, 0);

		span {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
		}
	}
}

label.checkbox-toggle:has(input[type="checkbox"]:checked) {
	/* Checked state styles */
	background: hsla(0, 0%, 0%, 0.1);

	@media (prefers-color-scheme:dark) {
		background: hsla(0, 100%, 100%, 0.5);
	}
}