@charset "UTF-8";

/**************
 * Scrollbars *
 **************/

scrollbar {
	-GtkScrollbar-has-backward-stepper: false;
	-GtkScrollbar-has-forward-stepper: false;

	background-color: gtk("@theme_bg_color");
	border-width: 0px 0px;
	border-color: gtk("@theme_bg_color");
	margin: 5px;

	button {
		min-width: 14px;
		min-height: 14px;
		margin: 0px;
		padding: 0px 0px;
		border: none;
		border-radius: 0px;
		background-image: none;
		background-color: transparent;
		color: transparent;
		box-shadow: none;
		&:hover {
			border: none;
			background-image: none;
			background-color: gtk("@theme_bg_color");
			color: transparent;
		}
		&:active,
		&:active:hover {
			border: none;
			background-image: none;
			background-color: gtk("@theme_bg_color");
			color: transparent;
		}
		&:disabled {
			border: none;
			background-color: gtk("@theme_bg_color");
			background-image: none;
			color: transparent;
		}
	}

	// Overlay Scrollbars
	&.dragging,                                                             // if this isn't set, the scrollbars don't update their size correctly
  &.hovering {
		opacity: 0.991;
	} // probably a gtk bug
	&.overlay-indicator:not(.dragging):not(.hovering) {
		opacity: 0.999;
	} //

	&.overlay-indicator:not(.dragging):not(.hovering) {
		-GtkScrollbar-has-backward-stepper: false;
		-GtkScrollbar-has-forward-stepper: false;
	}

	&.overlay-indicator {
		background: none;
	}

	trough {
		//margin: 0px;
		transition-duration: 0.1s;
		min-width: 6px;
		min-height: 14px;
		border-radius: 8px;
		background-color: transparent;
	}

	&:hover {
		trough {
			background-color: $trough_color_backdrop;
			min-width: 6px;
		}
		slider {
			min-width: 6px;
			background-color: gtk(
				"@theme_button_decoration_hover"
			);
		}
	}

	&.horizontal trough {
		//margin: 0px;
		transition-duration: 0.1s;
		min-width: 14px;
		min-height: 6px;
		border-radius: 8px;
		background-color: transparent;
	}

	&.horizontal:hover {
		&.horizontal trough {
			background-color: $trough_color_backdrop;
			min-height: 6px;
		}
		&.horizontal slider {
			min-height: 6px;
			background-color: gtk(
				"@theme_button_decoration_hover"
			);
		}
	}

	slider {
		//margin: 0px;
		transition-duration: 0.1s;
		min-width: 6px;
		min-height: 30px;
		border-radius: 8px;
		background-clip: padding-box;
		background-color: gtkalpha(gtk("@theme_fg_color"), 0.5);
		&:hover {
			min-width: 6px;
			background-color: gtk(
				"@theme_button_decoration_hover"
			);
		}
	}
	&.horizontal slider {
		transition-duration: 0.1s;
		min-width: 30px;
		min-height: 3px;
		border-radius: 8px;
		background-clip: padding-box;
		background-color: gtkalpha(gtk("@theme_fg_color"), 0.5);
		&:hover {
			min-height: 6px;
			background-color: gtk(
				"@theme_button_decoration_hover"
			);
		}
	}
}
