form {
	* {
		border: none;
		outline: none;
		font-size: var(--font-size-p);
	}

	label {
		cursor: pointer;
	}
}

input {
	font-family: inherit;
	font-size: inherit;

	&::placeholder {
		text-transform: capitalize;
	}

	&[type="checkbox"] {
		box-sizing: border-box;
		cursor: pointer;
		accent-color: var(--text-light-3);
	}

	&[type="text"] {
		box-sizing: border-box;
		min-width: 75%;
		padding: var(--gap-quarter) var(--gap-half);
		border: 1px solid var(--text-light-3);
		border-radius: var(--gap-quarter);
	}
}

select {
	font-family: inherit;
	font-size: inherit;
}

label.toggle-on-off-switch:has(input[type="checkbox"]) {
	--width: 43rem;
	--height: 22rem;
	--width-knob: 16rem;
	--margin-knob: calc(0.5 * (22rem - 16rem));
	--min-x: calc(0.5 * var(--width-knob) + var(--margin-knob));
	--max-x: calc(100% - var(--min-x));
	--color-inactive: var(--text-light-3);
	--color-active: var(--orange);

	display: block;
	position: relative;
	width: var(--width);
	height: var(--height);
	border: 1px solid var(--color-inactive);
	border-radius: var(--width-knob);

	input[type="checkbox"] {
		opacity: 0;
	}

	span.toggle__knob {
		position: absolute;
		left: var(--min-x);
		top: 50%;
		transform: translate(-50%, -50%);
		width: var(--width-knob);
		height: var(--width-knob);
		border-radius: var(--width-knob);
		background-color: var(--color-inactive);
	}

	&:has(input:checked) {
		border-color: var(--color-active);

		span.toggle__knob {
			left: var(--max-x);
			background-color: var(--color-active);
		}
	}
}