@charset "UTF-8";

/************
 * GtkScale *
 ************/
scale {
	padding: 12px;

	&.fine-tune {
		&.trough {
			margin: 8px;
			border-radius: $r;
		}
	}

	slider {
		min-width: 16px;
		min-height: 16px;
		border: 1px solid gtkmix(gtk("@theme_bg_color"),gtk("@theme_button_foreground_normal"), 0.4);
		border-radius: 50%;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.125);

		background: gtk("@theme_button_background_normal");
		margin: -9px;

		&:hover {
			border-color: gtk("@theme_button_decoration_hover");
			border-radius: 50%; // needed for double marks scales

			&:backdrop {
				border-color: gtk(
					"@theme_button_decoration_hover_insensitive"
				);
			}
		}

		&:disabled {
			border-style: solid; // needed for double marks scales or they'll get
			border-radius: 50%; // overridden
			background-color: gtk("@theme_button_background_insensitive");
			opacity: 1;
			border-color: gtk("@insensitive_borders");
			&:backdrop {
				background-color: gtkalpha(
					gtk(
						"@theme_button_background_backdrop_insensitive"
					),
					100
				);
				border-color: gtk("@unfocused_insensitive_borders");
			}
		}
		&:active {
			box-shadow: none;
			background-color: gtk("@theme_button_background_normal");
			&:backdrop {
				background-color: gtk(
					"@theme_button_background_normal"
				);
				border-color: gtk(
					"@theme_button_decoration_focus_backdrop"
				);
			}
		}
		&:backdrop {
			background-color: gtk(
				"@theme_button_background_backdrop"
			);
			border-color: gtk("@unfocused_borders");
		}
	}

	&:focus-within slider {
		border-color: gtk("@theme_button_decoration_focus");
		border-radius: 50%; // needed for double marks scales

		&:backdrop {
			border-color: gtk(
				"@theme_button_decoration_focus_insensitive"
			);
		}
	}

	trough {
		min-width: 4px;
		min-height: 4px;
		border: 1px solid;
		border-radius: $r;

		background: gtkoverlay(
			gtk("@theme_bg_color"),
			gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2)
		);

		border-color: gtkalpha(
			gtk("@theme_button_foreground_normal"),
			0.2
		);

		&:disabled, &.vertical:disabled {
			background: gtkoverlayalpha(
				gtk("@theme_bg_color"),
				gtkalpha(gtk("@theme_button_foreground_normal"), 0.5*0.2),
				0.5
			);
			border-color: gtkalpha(
				gtk("@theme_button_foreground_normal"),
				0.2 * 0.5
			);
		}
	}

	highlight {
		margin: -1px;
		border-radius: $r;
		background: gtkoverlay(
			gtk("@theme_bg_color"),
			gtkalpha(gtk("@theme_button_decoration_hover"), 0.5)
		);

		border: 1px solid gtk("@theme_button_decoration_hover");

		&:disabled {
			background: none;
			border-color: transparent;
		}

		&:backdrop {
			background: gtkoverlay(
				gtk("@theme_bg_color"),
				gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.5)
			);

			border-color: gtk(
				"@theme_unfocused_selected_bg_color"
			);

			&:disabled {
				background: none;
				border-color: transparent;
			}
		}
	}

	$_marks_length: 8px;
	$_marks_distance: 1px;


	> label {
		color: gtk("@theme_button_foreground_normal")
	}

	&.horizontal {
		> marks {
		color: gtkalpha(
			gtk("@theme_button_foreground_normal"),
			0.2
		);
		&.top    { margin-bottom: $_marks_distance; }
		&.bottom { margin-top: $_marks_distance; }

		indicator {
			background-color: gtkalpha(
				gtk("@theme_button_foreground_normal"),
				0.2
			);
			min-height: $_marks_length;
			min-width: 1px;
		}
		}

		> value.left  { margin-right: 9px; }
		> value.right { margin-left: 9px; }

		&.fine-tune >marks {
		&.top { margin-top: 3px; }
		&.bottom { margin-bottom: 3px; }

		indicator { min-height: ($_marks_length - 3px); }
		}
	}

	&.vertical {
		> marks {
		color: gtkalpha(
			gtk("@theme_button_foreground_normal"),
			0.2
		);
		&.top    { margin-right: $_marks_distance; }
		&.bottom { margin-left: $_marks_distance; }

		indicator {
			background-color: gtkalpha(
				gtk("@theme_button_foreground_normal"),
				0.2
			);
			min-height: 1px;
			min-width: $_marks_length;
		}
		}

		> value.top    { margin-bottom: 9px; }
		> value.bottom { margin-top: 9px; }

		&.fine-tune >marks {
		&.top { margin-left: 3px; }
		&.bottom { margin-right: 3px; }

		indicator { min-height: ($_marks_length - 3px); }
		}
	}

}
