@import "ansyn/less/common";
@import "ansyn/less/colors";
@import "ansyn/less/z-index-globals";

@tools-box-width: 250px;
@tools-box-height: 270px;

// input range styles (see https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
@track-progress-color: @application-primary-color;
@track-color: @background-color-7;
@thumb-color: @background-color-11;

@thumb-radius: 50%;
@thumb-size: 8px;
@thumb-border-width: 1px;
@thumb-border-color: @background-color-11;

@track-width: 145px;
@track-height: 2px;
@track-border-width: 1px;
@track-border-color: @background-color-7;

@track-radius: 5px;
@contrast: 5%;

:host {
	width: @tools-box-width;
	height: @tools-box-height;
	position: absolute;
	top: 35px;
	background: @background-color-3;
	transition-property: width;
	transition-duration: 0.1s;
	transition-delay: 0s;
	z-index: 0;
	color: white;

	

	.button-reset {
		cursor: pointer;
		margin-right: 40px;
	}
	div.image-processing-container {
		transition-delay: 0.05s;
		visibility: visible;
		padding: 0 20px;
		display: flex;
		flex-direction: column;

		.title-wrapper {
			margin-top: 5px;

			p.title {
				font-size: 13px;
				margin: 0;
				display: flex;

				.reset {
					cursor: pointer;
					width: 0;
					margin-right: 10px;
				}
			}
		}

		ul.image-processing-options {
			padding: 0;

			li {
				list-style-type: none;
				font-size: 12px;
				height: 20px;
				margin-bottom: 16px;
				padding-bottom: 10px;
				.param-info {
					height: 10px;
				}

				.input-wrapper {
					display: flex;

				}

				button {
					vertical-align: top;
					background: transparent;
					padding: 0;
					border: none;
					outline: 0 none;
					margin-right: auto;
					color: @background-color-7;
					font-size: 9px;

					&:hover {
						cursor: pointer;
						color: @background-color-11;
					}
				}

				.track() {
					width: @track-width;
					height: @track-height;
					cursor: pointer;
					animate: 0.2s;
				}

				.thumb() {
					border: @thumb-border-width solid @thumb-border-color;
					height: @thumb-size;
					width: @thumb-size;
					border-radius: @thumb-radius;
					background: @thumb-color;
					cursor: pointer;
				}

				// slider styles
				input[type=range] {
					-webkit-appearance: none;
					margin: @thumb-size/2 0;
					width: @track-width;
					background-color: transparent;

					&:focus {
						outline: none;
					}

					&::-webkit-slider-runnable-track {
						.track();
						background: @track-color;
						border-radius: @track-radius;
						border: @track-border-width solid @track-border-color;
					}

					&::-webkit-slider-thumb {
						.thumb();
						-webkit-appearance: none;
						margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-size / 2);
					}

					&:focus::-webkit-slider-runnable-track {
						background: lighten(@track-color, @contrast);
					}

					&::-moz-range-track {
						.track();
						background: @track-color;
						border-radius: @track-radius;
						border: @track-border-width solid @track-border-color;
					}

					&::-moz-range-thumb {
						.thumb();
					}

					&::-ms-track {
						.track();
						background: transparent;
						border-color: transparent;
						border-width: @thumb-size 0;
						color: transparent;
					}

					&::-ms-fill-lower {
						background: darken(@track-color, @contrast);
						border: @track-border-width solid @track-border-color;
						border-radius: @track-radius*2;
					}

					&::-ms-fill-upper {
						background: @track-color;
						border: @track-border-width solid @track-border-color;
						border-radius: @track-radius*2;
					}

					&::-ms-thumb {
						.thumb();
					}

					&:focus::-ms-fill-lower {
						background: @track-color;
					}

					&:focus::-ms-fill-upper {
						background: lighten(@track-color, @contrast);
					}

				}
			}
		}
	}
} // host
