/* ==============================================================
   Image Controls
   Style declarations for imageControls.xhtml
   ==============================================================*/
/* IMAGE CONTROLS */
/* BLOCK */
.image-controls {
	background-color: @bg-content-box;
	border: @border;
	border-bottom: 0;
	/* DOCUMENT OPTIONS */
	&__options {
		ul {}
	    li {}
	}
	&__option {
		a,
		span,
		button {
			color: @fg-controls;
			fill: @fg-controls;
			&:hover,
			&:active,
			&:focus {
				color: @fg-controls;
				fill: @fg-controls;
			}
		}
		a, button {}
		&.fulltext {}
		&.add-to-bookmark {
				.fa-bookmark-o,
				.fa-bookmark {}
			    &.added,
			    &:hover {
			    	.fa-bookmark-o,
			    	.fa-bookmark {}
			    }
		}
	}
    /* ACTIONS */
    &__actions {
    	ul {}
	    li {}
    }
	&__select-text {
	}
    &__action {
		border: @border;
		&:not(.zoom-slider-wrapper) {
			background-color: transparent;
		}
		& when (@colorModes = true) {
			.mx-dark-mode-rules ({
				&:not(.zoom-slider-wrapper) {
					background: @bg-active;
				}
			});
			.mx-light-mode-rules ({
				&:not(.zoom-slider-wrapper) {
					background-color: transparent;
				}
			});
		}
	    /* ELEMENT */
			&:hover,
			&:active,
			&:focus {
				background-color: @bg-hover;
			}

	    a,
		span,
		select,
		button {
			background-color: transparent;
			& when (@colorModes = true) {
				.mx-dark-mode-rules ({
					background: @bg-active;
					color: @fg-general;
				});
				.mx-light-mode-rules ({
					background-color: transparent;
				});
			}
			color: @fg-controls;
			fill: @fg-controls;
			&:hover,
			&:active,
			&:focus {
				background: @bg-hover !important;
				color: @fg-general;
			}
		}
		a svg {
			fill: @fg-controls;
		}
		[class*="image-"] {}
		&.inactive {
			fill: @fg-controls;
	    	a,
	    	span,
	    	button {
		}
		}
	    /* ELEMENT */
	    &.start {}
	    &.page-browse,
	    &.select {}
	    &.page-browse {
	        a, span {}
	    }
	    &.back {}
	    &.select-text {
	    	span {}
	    }
	    &.select {
	        .form-control__select {
	            select {}
	        }
	    }
	    &.forward {}
	    &.end {}
	    &.double-page-view,
	    &.single-page-view,
	    &.switch-pages {
		    [class*="image-"] {}
	    }
	    &.double-page-view {}
	    &.single-page-view {}
	    &.switch-pages {
			[class*="image-"] {}
	    }
	    &.rotate-left,
	    &.rotate-right {
	    	[class*="image-"] {}
	    }
	    &.rotate-left {}
	    &.rotate-right {}
	    &.reset {}
	    &.enter-fullscreen {}
	    &.zoom-slider-wrapper {
	        .zoom-slider {
	            //Firefox
		        &::-moz-range-thumb {
					background: #6f6f6f;
					border: inherit;
					& when (@colorModes = true) {
						.mx-dark-mode-rules ({
							background-color: @bg-active;
							border: 1px solid #6f6f6f;
						});
						.mx-light-mode-rules ({
							background: #6f6f6f;
							border: inherit;
						});
					}
		        }
				&:focus {
				}
		        &::-webkit-slider-thumb {
					background: @gray;
					border: inherit;
					& when (@colorModes = true) {
						.mx-dark-mode-rules ({
							background-color: @bg-active;
							border: 1px solid #6f6f6f;
						});
						.mx-light-mode-rules ({
							background: @gray;
							border: inherit;
						});
					}
				}
				&::-webkit-slider-runnable-track {
				}
	        }
			.zoom-slider-handle {
				fill: @fg-controls;
			}
	    }
	}
    /* MODIFICATION */
	.labeltext {}
}

/* BREAKPOINT FOR LARGE DESKTOP */
@media screen and (max-width: @largeBreakpoint) {}

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}
