@button-width: 16vw;
@button-width-large: 120px;
@button-width-small: 14vw;

#control.active {
	.flex-display();
	.flex-flow(row wrap);
	margin: 0 auto;
	max-width: 700px;
	overflow: visible;
	position: relative;

	> .jog-panel:not(#control-jog-extrusion):not(#control-jog-custom) {
		.flex-display();
		.justify-content(space-between);
		.flex(0 0 100%);
		margin: 0;
		padding: 0 0 @main-gutter;
	}

	#control-jog-general,
	#control-jog-xy,
	#control-jog-z {
		.flex-display();
		.flex(0 0 auto);
		.flex-flow(column);
		margin: 0;

		h1 {
			display: none;
		}

		> div {
			.flex-display();
			.justify-content(space-around);
		}

		button {
			color: contrast(@main-background, @dark-color, @light-color);
			background: transparent;

			&:active {
				color: @btn-main-background;
			}

			font-size: 36px;
			display: inline-block;
			padding: 0 !important;
			margin: 0;
			font-weight: normal;

			width: @button-width;
			height: 16vw;
			font-size: 11vw;

			@media (min-width: 700px) {
				font-size: 80px !important;
				width: @button-width-large;
				height: 120px;
			}

			@media (max-width: 450px) {
				width: @button-width-small;
				height: 16vw;
			}
		}
	}

	#control-jog-custom {
		.flex(0 0 100%);
	}

	#control-jog-rate,
	#control-jog-extrusion {
		.box-sizing(border-box);
		.flex(0 0 50%);
		margin: 0;
		overflow: hidden;

		@media (max-width: 450px) {
			.flex(0 0 100%);
		}
	}

	#control-jog-rate {
		padding-right: @main-gutter / 2;

		div {
			margin: 0;
			width: 100%;
		}

		.distance {
			.btn-group {
				width: 100%;
				margin: 0;

				button {
					background: mix(@btn-main-background, @main-background, 60%);
					color: @btn-main-text;

					width: 25% !important;
					border-right: 1px solid @main-background;
					min-height: 40px;
					padding: 0;

					&:last-child {
						border-right: 0 none;
					}

					&.active {
						background: @btn-main-background;
						color: @btn-main-text;
					}
				}
			}
		}
	}

	#control-jog-extrusion {
		padding-left: @main-gutter / 2;

		h1 {
			display: none;
		}

		div[data-bind*="tools()"] {
			.flex-display();
			.align-items(center);

			.btn-group {
				.flex(1);
				padding-right: 10px;
			}
		}
	}

	#control-jog-extrusion,
	#control-jog-rate,
	#control-jog-custom {
		.btn-group.control-box {
			height: auto;
			margin: 0 0 20px;

			button {
				margin: 0;
			}
		}

		.input-append.control-box {
			.flex-display();
			margin: 0 0 20px;
			height: auto;

			.add-on {
				padding: 10px;
				z-index: 200;
			}

			input {
				.flex(1);
				margin: 0;
			}

			button {
				width: auto;
				margin: 0;
			}
		}

		button, input {
			padding: 10px 20px;
			margin: 0 0 20px;
			width: 100%;
			min-height: 40px;
			height: auto;
			.box-sizing(border-box);

			span {
				margin-left: 5px;
			}
		}

		.slider-container {
			min-width: 200px;
		}

		@media (max-width: 450px) {
			position: static;
			float: none;
			width: 100%;
			padding: 0;
		}
	}

	#control-jog-general {
		.flex-display();

		button {
			font-size: 36px;
			padding: 0 !important;
			margin: 0;
			font-weight: normal;
			overflow: hidden;

			color: contrast(@main-background, @dark-color, @light-color);
			background: transparent;

			&:active {
				color: @btn-main-background;
			}

			width: @button-width;
			height: 16vw;
			font-size: 11vw;
			line-height: 200vw;

			@media (min-width: 700px) {
				font-size: 80px !important;
				width: @button-width-large;
				height: 120px;
			}
			@media (max-width: 450px) {
				width: @button-width-small;
				height: 16vw;
			}

			&:before,
			&:after {
				color: inherit;
				.font-icon-reset();
				.text-shadow(0 0 0 transparent);
				display: block;
				overflow: hidden;
				line-height: 16vw;

				@media (min-width: 700px) {
					line-height: 120px;
				}
			}
		}

		div {
			.flex-display();
			.flex-flow(column);

			button {
				position: relative;

				&:before {
					font-family: touchui;
					content: "\e900"
				}

				&:first-child {
					&:before {
						.font-icon-reset();
						background: transparent;
						content: @fa-legacy-var-power-off;
					}
				}

				&:last-child {
					&:after {
						.font-icon-reset();
						content: @fa-legacy-var-times-circle;
						color: @main-color !important;
						font-size: 8vw;
						position: absolute;
						top: -2vw;
						right: 1vw;
						text-indent: 2000px;

						@media (min-width: 700px) {
							font-size: 58px;
							top: -16px;
							right: 13px;
						}
					}
				}
			}

		}
	}

	.slider-container {
		position: relative;

		&:after {
			content: "";
			display: block;
			clear: both
		}

		button {
			.box-sizing(border-box);
			float: right;
			width: 25% !important;
			position: relative;
			padding: 0;
			margin: 0;
			direction: rtl;
			white-space: nowrap;
			overflow: hidden;
			text-indent: -700px;
			border-left: 1px solid @main-background;

			&:after {
				.font-icon-reset();
				content: @fa-legacy-var-check;
				width: 100%;
				position: absolute;
				right: 0;
				text-indent: 0;
				.rem(font-size, 21);
				.rem(line-height, 19);
			}
		}

		input {
			.box-sizing(border-box);
			float: left;
			text-align: right;
			width: 75% !important;
			padding-left: 90px;
			padding-right: 0 !important;
		}

		label {
			position: absolute;
			margin: 10px 0 10px 10px;
			color: @input-text-color;
			z-index: 2;
			left: 0;
		}
	}

	@media all and (orientation: portrait) {
		> .jog-panel:not(#control-jog-extrusion):not(#control-jog-custom) {
			.flex-flow(column);
		}

		#control-jog-z {
			.flex-display();
			.flex-flow(row);
			.justify-content(space-around);
		}

		#control-jog-general > div {
			.flex-display();
			.flex-flow(row);
			width: 100%;
		}

		#control-jog-xy,
		#control-jog-z {
			padding-bottom: 30px;
		}
	}
}
