#usb-widget {
	display: block;
	position: relative;
	margin: 6rem 0px;

	div.svg {
		grid-column: 1/3;

		svg {
			width: 100%;
			fill: var(--lighter-blue);
			transition: x 300ms linear;

			path {
				stroke: var(--lighter-blue);
				stroke-width: 0.2px;

				&#edge {
					stroke-width: 1px;
				}
			}

			rect {
				fill: var(--lighter-blue);
			}

			g#check {
				opacity: 0;
				&.show {
					opacity: 1;
				}
			}

			g#arrows {
				opacity: 0;
				transition: opacity 300ms linear, transform 300ms linear;
				transform: translate(15px);

				&.show {
					opacity: 1;
					transition: opacity 300ms linear, transform 10ms linear;
					transform: translate(0);
				}

				.arrow {
					stroke: none;
					animation: blink 1200ms linear infinite;
					&:nth-child(2) {
						animation-delay: 300ms;
					}
					&:nth-child(3) {
						animation-delay: 600ms;
					}
				}
			}

			g#usb {
				rect {
					fill: none;
					stroke: var(--lighter-blue);
					stroke-width: 0.4px;
				}
			}

			.cutout { opacity: 0; }
		}
	}

	input[type=range] {
		position: absolute;
		top: 47.5%;
		left: 27%;
		width: 50%;
		height: 0px;
		text-align: center;
	}

	/* Special styling for WebKit/Blink */
	input[type=range]::-webkit-slider-thumb {
		border: 0px;
		height: 4.5rem;
		width: 29%;
		background: transparent;
		cursor: pointer;
	}

	/* All the same stuff for Firefox */
	input[type=range]::-moz-range-thumb {
		border: 0px;
		height: 4.5rem;
		width: 29%;
		background: transparent;
		cursor: pointer;
	}

	/* All the same stuff for IE */
	input[type=range]::-ms-thumb {
		border: 0px;
		height: 4.5rem;
		width: 29%;
		background: transparent;
		cursor: pointer;
	}


	/*****************************************************************************/

	input[type=range]::-webkit-slider-runnable-track {
		width: 100%;
		height: 0px;
		border: 0px;
		background: transparent;
	}

	input[type=range]:focus::-webkit-slider-runnable-track {
		background: transparent;
	}

	input[type=range]::-moz-range-track {
		width: 100%;
		height: 0px;
		border: 0px;
		background: transparent;
	}

	input[type=range]::-ms-track {
		width: 100%;
		height: 0px;
		border: 0px;
		background: transparent;
	}
	input[type=range]::-ms-fill-lower {
		background: transparent;
	}
	input[type=range]:focus::-ms-fill-lower {
		background: transparent;
	}
	input[type=range]::-ms-fill-upper {
		background: transparent;
	}
	input[type=range]:focus::-ms-fill-upper {
		background: transparent;
	}
}

@keyframes blink {
	0% {
		fill: var(--darker-blue);
	}
	20% {
		fill: var(--lighter-blue);
	}
	40% {
		fill: var(--darker-blue);
	}
	100% {
		fill: var(--darker-blue);
	}
}