@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap');

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

$ui: "5250c";

$prefix: "x-";

$input: "iceCap-input";

$output: "iceCap-output";

$background-color: black;

$cursor-color: white;

$selection-color: black;

$text-color: #53e700;

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

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

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

.icecap-field-#{$ui}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
	transition: none;
}

.icecap-field-#{$ui} {

	.#{$prefix}form-display-field {
		background: transparent;
		color: $text-color !important;
	}

	.#{$prefix}form-trigger-wrap {
		border-bottom: 1px solid $text-color !important;
		border-top: transparent !important;
		border-left: transparent !important;
		border-right: transparent !important;
		border-radius: 0px;
	}
	input {
		background-color: $background-color !important;
		color: $text-color !important;
		caret-color: $cursor-color !important;
		&::selection {
			color: $selection-color !important;
			background-color: $text-color !important;
		}
	}
}

.iceCap-input-password-#{$ui} {
	.#{$prefix}form-trigger-wrap {
		background-color: transparent !important;
		border: none !important;
	}
	input {
		caret-color: $text-color !important;
		color: transparent !important;
		background-color: transparent !important;
		&::selection {
			color: transparent !important;
		}
	}
}

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

@for $i from 2 through 3 {

	@each $j in $list {

		$i_background: null;
		$i_color: null;

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


		@if ($i == 2) {

			@if ($j == 0) {
				$o_background: transparent;
				$o_color: $text-color;

				$i_background: #000000;
				$i_color: $text-color;
			}
			@if ($j == 1) {

				$o_background: $text-color;
				$o_color: #000000;

				$i_background: $text-color;
				$i_color: #000000;


			}
			@if ($j == 2) {

				$o_background: transparent;
				$o_color: #FFFFFF;

				$i_background: #000000;
				$i_color: #FFFFFF;

			}
			@if ($j == 3) {

				$o_background: #FFFFFF;
				$o_color: #000000;

				$i_background: #FFFFFF;
				$i_color: #000000;


			}
			@if ($j == 4) {

				$o_background: transparent;
				$o_color: $text-color;
				$o_text-decoration: underline;

				$i_background: #000000;
				$i_color: $text-color;

			}
			@if ($j == 5) {

				$o_background: $text-color;
				$o_color: #000000;

				$i_background: $text-color;
				$i_color: #000000;

			}
			@if ($j == 6) {

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

				$i_background: #000000;
				$i_color: #FFFFFF;

			}
			@if ($j == 7) {

				$o_background: transparent;
				$o_color: #000000;

				$i_background: #000000;
				$i_color: $text-color;
			}
			@if ($j == 8) {

				$o_background: transparent;
				$o_color: #F01818;

				$i_background: #000000;
				$i_color: #F01818;
			}
			@if ($j == 9) {

				$o_background: #F01818;
				$o_color: #000000;

				$i_background: #F01818;
				$i_color: #000000;
			}

		}

		@if ($i == 3) {

			@if ($j == 0) {
				$o_background: transparent;
				$o_color: #58F0F0;

				$i_background: #000000;
				$i_color: #58F0F0;
			}
			@if ($j == 1) {

				$o_background: #58F0F0;
				$o_color: #000000;

				$i_background: #58F0F0;
				$i_color: #000000;


			}
			@if ($j == 2) {

				$o_background: transparent;
				$o_color: #FFFFFF;

				$i_background: #000000;
				$i_color: #FFFFFF;

			}
			@if ($j == 3) {

				$o_background: #FFFF00;
				$o_color: #000000;

				$i_background: #FFFF00;
				$i_color: #000000;


			}
			@if ($j == 4) {

				$o_background: transparent;
				$o_color: #58F0F0;
				$o_text-decoration: underline;

				$i_background: #000000;
				$i_color: #58F0F0;

			}
			@if ($j == 5) {

				$o_background: #58F0F0;
				$o_color: #000000;
				$o_text-decoration: underline;

				$i_background: #58F0F0;
				$i_color: #000000;

			}
			@if ($j == 6) {

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

				$i_background: #000000;
				$i_color: #FFFF00;



			}
			@if ($j == 7) {

				$o_background: transparent;
				$o_color: #000000;

				$i_background: #000000;
				$i_color: #FFFF00;
			}
			@if ($j == 8) {

				$o_background: transparent;
				$o_color: #FF00FF;

				$i_background: #000000;
				$i_color: #FF00FF;
			}
			@if ($j == 9) {

				$o_background: #FF00FF;
				$o_color: #000000;

				$i_background: #FF00FF;
				$i_color: #000000;
			}

		}

		.#{$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_background !important;
					color: $i_color !important;
				}
			}
		}
	}

	@each $c in $chars {

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

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


		@if ($c == A) {

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

			$i_background: #000000;
			$i_color: $o_color;
			$i_text-decoration: $o_text-decoration;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #7890F0;
				$o_text-decoration: none;

				$i_background: #000000;
				$i_color: $o_color;
				$i_text-decoration: $o_text-decoration;
			}


		}

		@if ($c == B) {


			$o_background: #F01818;
			$o_color: #000000;
			$o_text-decoration: blink;

			$i_background: $o_background;
			$i_color: $o_color;
			$i_text-decoration: $o_text-decoration;

			@if ($i == 3) {

				$o_background: #7890F0;
				$o_color: #000000;
				$o_text-decoration: none;

				$i_background: #000000;
				$i_color: $o_color;
				$i_text-decoration: none;
			}

		}

		@if ($c == C) {

			$o_background: transparent;
			$o_color: #F01818;

			$i_background: #000000;
			$i_color: $o_color;

			@if ($i == 3) {

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

				$i_background: #000000;
				$i_color: $o_color;
				$i_text-decoration: none;
			}

		}

		@if ($c == D) {

			$o_background: #F01818;
			$o_color: #000000;

			$i_background: $o_background;
			$i_color: $o_color;

			@if ($i == 3) {

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

				$i_background: $o_background;
				$i_color: $o_color;
				$i_text-decoration: none;
			}

		}

		@if ($c == E) {

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

			$i_background: #000000;
			$i_color: $o_color;
			$i_text-decoration: $o_text-decoration;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #7890F0;
				$o_text-decoration: underline;

				$i_background: #000000;
				$i_color: $o_color;
				$i_text-decoration: none;
			}

		}

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

			$i_background: #000000;
			$i_color: #F01818;

			@if ($i == 3) {

				$o_background: transparent;
				$o_color: #7890F0;

				$i_background: #000000;
				$i_color: $o_color;
			}
		}

		.#{$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_background !important;
					color: $i_color !important;
				}
			}
		}
	}
}
