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

$ui: "Slate";

$prefix: "x-";

$input: "iceCap-input";

$output: "iceCap-output";

$background-color: transparent;

.#{$prefix}panel-body-icecap-#{$ui} {
	background-color: #eeeeee !important;
}

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

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

.iceCap-input-password-#{$ui} {

	.#{$prefix}form-trigger-wrap-default {
		background-color: transparent !important;
		border: none !important;
	}

	input {
		caret-color: #4c647e !important;
		color: transparent !important;
		&::selection {
			color: transparent !important;
		}
	}
}

.iceCap-row-#{$ui} {
	background-color: $background-color;
}


@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: none;


		@if ($i == 2) {

			@if ($j == 0) {

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

				$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_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_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_color: #4c647e;

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

			}
			@if ($j == 7) {

				$o_background: transparent;
				$o_color: #E5E9EB;

				$i_color: #33363a;

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

				$o_background: transparent;
				$o_color: #dc2222;

				$i_color: #dc2222;

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

				$o_background: #dc2222;
				$o_color: #ffffff;

				$i_background: #dc2222;
				$i_color: #ffffff;

				$i_protected_background: #dc2222;
				$i_protected_color: #ffffff;
			}

		}

		@if ($i == 3) {

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

				$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_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_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_color: #bc7a00;

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

			}
			@if ($j == 7) {

				$o_background: transparent;
				$o_color: #E5E9EB;

				$i_color: #1996a7;

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

				$o_background: transparent;
				$o_color: #e941ff;

				$i_color: #e941ff;

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

				$o_background: #e941ff;
				$o_color: #ffffff;

				$i_background: #e941ff;
				$i_color: #ffffff;

				$i_protected_background: #e941ff;
				$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;
			}
			&-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: none;

		$i_protected_background: null;
		$i_protected_color: null;

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


		@if ($c == A) {

			$o_background: transparent;
			$o_color: #dc2222;
			$o_text-decoration: blink;

			$i_color: #dc2222;
			$i_text-decoration: $o_text-decoration;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #dc2222;

			@if ($i == 3) {

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

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

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

			}
		}

		@if ($c == B) {


			$o_background: #dc2222;
			$o_color: #ffffff;
			$o_text-decoration: blink;

			$i_background: #dc2222;
			$i_color: #ffffff;
			$i_text-decoration: $o_text-decoration;

			$i_protected_background: #dc2222;
			$i_protected_color: #ffffff;

			@if ($i == 3) {

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

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

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

		}

		@if ($c == C) {

			$o_background: transparent;
			$o_color: #dc2222;

			$i_color: #dc2222;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #dc2222;

			@if ($i == 3) {

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

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

				$i_protected_background: #EFF3F5;
				$i_protected_color: #e941ff;
			}

		}

		@if ($c == D) {

			$o_background: #dc2222;
			$o_color: #ffffff;

			$i_background: #dc2222;
			$i_color: #ffffff;

			$i_protected_background: #dc2222;
			$i_protected_color: #ffffff;

			@if ($i == 3) {

				$o_background: #e941ff;
				$o_color: #ffffff;
				$o_text-decoration: underline;

				$i_background: #e941ff;
				$i_color: #ffffff;
				$i_text-decoration: none;

				$i_protected_background: #e941ff;
				$i_protected_color: #ffffff;
			}

		}

		@if ($c == E) {

			$o_background: transparent;
			$o_color: #dc2222;
			$o_text-decoration: blink;

			$i_color: #dc2222;
			$i_text-decoration: $o_text-decoration;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #dc2222;

			@if ($i == 3) {

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

				$i_color: #94a2be;
				$i_text-decoration: none;

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

		}

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

			$i_color: #dc2222;

			$i_protected_background: #EFF3F5;
			$i_protected_color: #dc2222;

			@if ($i == 3) {

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

				$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;
			}
			&-protected {
				input {
					background: $i_protected_background !important;
					color: $i_protected_color !important;
				}
			}
		}
	}
}
