Gradient change for form elements

formgradients.scss

$color: #804A69;

/*-------
Goal: The main color gets lighten by a small percentage each time the nth-of-type increase
-------*/

form { // to limit to forms only
	$n: 15; // to make sure the loop stops
	@for $i from 0 to $n { // for loop
		$label: $i/10 * 100% - 10%; // e.g. for nth-of-type(1) $i = 3 -> $label = (3/10 * 100%) - 10% = 20%
		$input: $i/10 * 100% - 5%; // e.g. for nth-of-type(3) $i = 3 -> $input = (3/10 * 100%) - 5% = 25%
		div:nth-of-type(#{$i + 1}) { // start loop
			label {
				color: lighten($color, $label); // e.g. for nth-of-type(3), color: lighten( #804A69, 20%);
			}
			input[type],
			textarea {
				border: 2px solid lighten($color, $input);
				&:focus {
					background-image: linear-gradient(to bottom right, transparent, transparent, lighten($color, 55%));
				}
			}
		}
	}
}