
$list: (0,1,2,3,4,5,6,7,8,9);
$chars: (A,B,C,D,E,F);

$ui: "Slate";

$input: "iceCap-input";

$output: "iceCap-output";

$background-color: black;

.iceCap-cursor-#{$ui} {
	border: 1px solid red !important;
}

.icecap-field-#{$ui} {
	color: #4c647e;
}

.icecap-field-#{$ui} .x-form-display-field-default {
	background: transparent;
	color: #4c647e;
}

.iceCap-input-password-#{$ui} .x-form-trigger-wrap-default {
	background-color: transparent !important;
	border: none !important;
}

.iceCap-input-password-#{$ui} input {
	caret-color: #4c647e !important;
	color: transparent !important;
	background-color: transparent !important;
}

.iceCap-input-password-#{$ui} ::selection {
  color: transparent !important;
}


@for $i from 2 through 3 {

	@each $j in $list {

		$i_background: null;
		$i_color: null;
		$i_protected_background: null;
		$i_protected_color: null;

		$o_background: null;
		$o_color: null;
		$o_text-decoration: null;


		@if ($i == 2) {

			@if ($j == 0) {

				$o_background: transparent;
				$o_color: #4c647e;

				$i_background: transparent;
				$i_color: #33363a;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #33363a;
			}
			@if ($j == 1) {

				$o_background: #4c647e;
				$o_color: #ffffff;

				$i_background: #33363a;
				$i_color: #ffffff;

				$i_protected_background: #33363a;
				$i_protected_color: #ffffff;

			}
			@if ($j == 2) {

				$o_background: transparent;
				$o_color: #33363a;

				$i_background: transparent;
				$i_color: #4c647e;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #4c647e;

			}
			@if ($j == 3) {

				$o_background: #33363a;
				$o_color: #ffffff;

				$i_background: #4c647e;
				$i_color: #ffffff;

				$i_protected_background: #4c647e;
				$i_protected_color: #ffffff;
			}
			@if ($j == 4) {

				$o_background: transparent;
				$o_color: #4c647e;
				$o_text-decoration: underline;

				$i_background: transparent;
				$i_color: #33363a;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #33363a;

			}
			@if ($j == 5) {

				$o_background: #4c647e;
				$o_color: #ffffff;

				$i_background: #33363a;
				$i_color: #ffffff;

				$i_protected_background: #33363a;
				$i_protected_color: #ffffff;

			}
			@if ($j == 6) {

				$o_background: transparent;
				$o_color: #33363a;
				$o_text-decoration: underline;

				$i_background: transparent;
				$i_color: #4c647e;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #4c647e;

			}
			@if ($j == 7) {

				$o_background: transparent;
				$o_color: #E5E9EB;

				$i_background: transparent;
				$i_color: #33363a;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #33363a;
			}
			@if ($j == 8) {

				$o_background: transparent;
				$o_color: #8f3131;

				$i_background: transparent;
				$i_color: #8f3131;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #8f3131;
			}
			@if ($j == 9) {

				$o_background: #8f3131;
				$o_color: #ffffff;

				$i_background: #8f3131;
				$i_color: #ffffff;

				$i_protected_background: #8f3131;
				$i_protected_color: #ffffff;
			}

		}

		@if ($i == 3) {

			@if ($j == 0) {
				$o_background: transparent;
				$o_color: #1996a7;

				$i_background: transparent;
				$i_color: #1996a7;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #1996a7;
			}
			@if ($j == 1) {

				$o_background: #1996a7;
				$o_color: #ffffff;

				$i_background: #1996a7;
				$i_color: #ffffff;

				$i_protected_background: #1996a7;
				$i_protected_color: #ffffff;
			}
			@if ($j == 2) {

				$o_background: transparent;
				$o_color: #bc7a00;

				$i_background: transparent;
				$i_color: #bc7a00;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #bc7a00;

			}
			@if ($j == 3) {

				$o_background: #bc7a00;
				$o_color: #ffffff;

				$i_background: #bc7a00;
				$i_color: #ffffff;

				$i_protected_background: #bc7a00;
				$i_protected_color: #ffffff;

			}
			@if ($j == 4) {

				$o_background: transparent;
				$o_color: #1996a7;
				$o_text-decoration: underline;

				$i_background: transparent;
				$i_color: #1996a7;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #1996a7;

			}
			@if ($j == 5) {

				$o_background: #1996a7;
				$o_color: #ffffff;
				$o_text-decoration: underline;

				$i_background: #1996a7;
				$i_color: #ffffff;

				$i_protected_background: #1996a7;
				$i_protected_color: #ffffff;

			}
			@if ($j == 6) {

				$o_background: transparent;
				$o_color: #bc7a00;
				$o_text-decoration: underline;

				$i_background: transparent;
				$i_color: #bc7a00;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #bc7a00;

			}
			@if ($j == 7) {

				$o_background: transparent;
				$o_color: #E5E9EB;

				$i_background: transparent;
				$i_color: #1996a7;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #1996a7;
			}
			@if ($j == 8) {

				$o_background: transparent;
				$o_color: #984da2;

				$i_background: transparent;
				$i_color: #984da2;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #984da2;
			}
			@if ($j == 9) {

				$o_background: #984da2;
				$o_color: #ffffff;

				$i_background: #984da2;
				$i_color: #ffffff;

				$i_protected_background: #984da2;
				$i_protected_color: #ffffff;
			}

		}

		.#{$output}-#{$i}#{$j}-#{$ui} {
			background: $o_background !important;
			color: $o_color !important;
			text-decoration: $o_text-decoration;
		}

		.#{$input}-#{$i}#{$j}-#{$ui} input {
			background: $i_background !important;
			color: $i_color !important;
		}

		.#{$input}-#{$i}#{$j}-#{$ui}-focus input {
		}

		.#{$input}-#{$i}#{$j}-#{$ui}-protected input {
			background: $i_protected_background !important;
			color: $i_protected_color !important;
		}
	}

	@each $c in $chars {

		$i_background: null;
		$i_color: null;
		$i_text-decoration: null;

		$i_protected_background: null;
		$i_protected_color: null;

		$o_background: null;
		$o_color: null;
		$o_text-decoration: null;


		@if ($c == A) {

			$o_background: transparent;
			$o_color: #8f3131;
			$o_text-decoration: blink;

			$i_background: transparent;
			$i_color: #8f3131;
			$i_text-decoration: $o_text-decoration;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #8f3131;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #94a2be;
				$o_text-decoration: null;

				$i_background: transparent;
				$i_color: #94a2be;
				$i_text-decoration: $o_text-decoration;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #94a2be;

			}
		}

		@if ($c == B) {


			$o_background: #8f3131;
			$o_color: #ffffff;
			$o_text-decoration: blink;

			$i_background: #8f3131;
			$i_color: #ffffff;
			$i_text-decoration: $o_text-decoration;

			$i_protected_background: #8f3131;
			$i_protected_color: #ffffff;

			@if ($i == 3) {

				$o_background: #94a2be;
				$o_color: #ffffff;
				$o_text-decoration: null;

				$i_background: #94a2be;
				$i_color: #ffffff;
				$i_text-decoration: null;

				$i_protected_background: #94a2be;
				$i_protected_color: #ffffff;
			}

		}

		@if ($c == C) {

			$o_background: transparent;
			$o_color: #8f3131;

			$i_background: transparent;
			$i_color: #8f3131;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #8f3131;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #FF00FF;
				$o_text-decoration: underline;

				$i_background: #000000;
				$i_color: #ffffff;
				$i_text-decoration: null;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #984da2;
			}

		}

		@if ($c == D) {

			$o_background: #8f3131;
			$o_color: #ffffff;

			$i_background: #8f3131;
			$i_color: #ffffff;

			$i_protected_background: #8f3131;
			$i_protected_color: #ffffff;

			@if ($i == 3) {

				$o_background: #984da2;
				$o_color: #ffffff;
				$o_text-decoration: underline;

				$i_background: #984da2;
				$i_color: #ffffff;
				$i_text-decoration: null;

				$i_protected_background: #984da2;
				$i_protected_color: #ffffff;
			}

		}

		@if ($c == E) {

			$o_background: transparent;
			$o_color: #8f3131;
			$o_text-decoration: blink;

			$i_background: transparent;
			$i_color: #8f3131;
			$i_text-decoration: $o_text-decoration;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #8f3131;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #94a2be;
				$o_text-decoration: underline;

				$i_background: transparent;
				$i_color: #94a2be;
				$i_text-decoration: null;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #94a2be;
			}

		}

		@if ($c == F) {
			$o_background: transparent;
			$o_color: #E5E9EB;

			$i_background: transparent;
			$i_color: #8f3131;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #8f3131;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #94a2be;

				$i_background: transparent;
				$i_color: #94a2be;

				$i_protected_background: #EFF3F5;
				$i_protected_color: #94a2be;
			}
		}

		.#{$output}-#{$i}#{$c}-#{$ui} {
			background: $o_background !important;
			color: $o_color !important;
			text-decoration: $o_text-decoration;
		}

		.#{$input}-#{$i}#{$c}-#{$ui} input {
			background: $i_background !important;
			color: $i_color !important;
			text-decoration: $i_text-decoration;
		}

		.#{$input}-#{$i}#{$c}-#{$ui}-focus input {
		}

		.#{$input}-#{$i}#{$c}-#{$ui}-protected input {
			background: $i_protected_background !important;
			color: $i_protected_color !important;
		}
	}
}
