@import url('../../css/_site.css');

:root {
	--color-bg: #404040;
	--color-button: #404040;
	--color-border: #303030;
	--color-high: #606060;
	--color-low: #303030;
	--color-lcd: #f0ffd0;
}

.eremote {
	display: inline-block;
	position: relative;
	top: 0;
	left: 0;
	margin: 1em auto;
	padding: 16px;
	background-color: var(--color-bg);
	color: white;
	font-size: 60%;
	font-family: Geneva, Verdana, sans-serif;
	cursor: row-resize;

	&.busy {
		cursor: wait !important;

		* {
			cursor: wait !important;
		}
	}

	td {
		text-align: center;
	}

	div.inactive {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: not-allowed;
		background-color: rgb(192 192 192 / 50%);
		background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgb(255 255 255 / 50%) 15px, rgb(255 255 255 / 50%) 30px);
	}

	.label-row {
		text-transform: uppercase;
		letter-spacing: 0.3em;

		td {
			padding-top: 8px;
			padding-bottom: 0;
		}
	}

	.label-span {
		display: grid;
		width: 100%;
		align-items: center;
		grid-template-columns: minmax(8px, 1fr) auto minmax(8px, 1fr);
		grid-gap: 8px;

		&::before, &::after {
			content: '';
		    border-top: 1px solid #900000;
		}
	}

	table {
		table-layout: fixed;
	}

	.model {
		text-transform: uppercase;
		text-align: left;
		vertical-align: top;
		font-size: 240%;
	}

	.connections {
		font-size: 125%;
	}

	.lcd {
		image-rendering: pixelated;
		box-sizing: content-box;
		display: block;
		margin: auto;
		border: 4px solid var(--color-lcd);
		background-color: var(--color-lcd);
		width: 480px;
		height: 128px;
	}

	.led::before {
		left: 6px;
		content: '\f111';
	}

	.led::before, .led::after {
		color: #400000;
		position: absolute;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
	}

	.led.lit::before, .led.lit::after {
		color: red;
		text-shadow: 0 0 1px #000, 0 0 6px red, 0 0 8px #ffc0c0;
	}

	button {
		position: relative;
		height: 2.0rem;
		color: white;
		background:  linear-gradient(to bottom, black, var(--color-high) 35%, var(--color-button) 75%, black);
		outline: none;
		border-color: var(--color-border);
		border-style: solid;
		border-width: 2px;
		border-radius: 4px;
		font-size: inherit;
		text-transform: uppercase;
		cursor: pointer;

		&:active,&.pressed {
			background:  linear-gradient(to bottom, black, var(--color-button) 35%, var(--color-button) 75%, black);
		}

		&:focus{
			border-color: #602020;
		}

		&:active {
			border-color: #202020;
		}

		/* "prev" button needs left arrow */
		&[data-value="69"] {
			&.led::before {
				content: '\f04b';
				transform: scaleX(-1);
			}
		}

		/* "next" button needs right arrow */
		&[data-value="6b"] {
			&.led::after {
				right: 6px;
				content: '\f04b';
			}

			&.led::before {
				content: '';
			}
		}

		&.type1 {
			width: 32px;
			margin-left: 0.4rem;
			margin-right: 0.4rem;
		}

		&.type2 {
			width: 5.5rem;
			margin-left: 0;
			margin-right: 0;
		}
	}

    .virtual {
		position: absolute;
		left: 6px;
		top: 104px;

		button {
			margin-right: 1px;
			background: transparent;
			border: none !important;
			font-size:0;
		}
	}

	#keypad {
		.label-row td {
			letter-spacing: 0;
			font-size: 60%;
			line-height: 0.8;
			padding-top: 3px;
		}
	}
}