@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: 0.5px 0.5px 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"
				);
			}
		}

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

			&:backdrop {
				border-color: gtk(
					"@theme_button_decoration_focus_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");
		}
	}

	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;

	marks {
		color: gtkalpha(
			gtk("@theme_button_foreground_normal"),
			0.2
		);
		font-feature-settings: "tnum";
	}

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

	@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
                                                                  (horizontal, bottom, bottom, top),
                                                                  (vertical, top, left, right),
                                                                  (vertical, bottom, right, left) {
		&.#{$scale_orient} marks {
			&.#{$marks_class} {
				margin-#{$marks_margin}: $_marks_distance;
				margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
			}
		}

		&.#{$scale_orient}.fine-tune marks {
			&.#{$marks_class} {
				margin-#{$marks_margin}: $_marks_distance;
				margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
			}
		}
	}

	&.horizontal {
		indicator {
			min-height: $_marks_length;
			min-width: 1px;
		}

		&.fine-tune indicator { min-height: ($_marks_length - 3px); }
	}

	&.vertical {
		indicator {
			min-height: 1px;
			min-width: $_marks_length;
		}

		&.fine-tune indicator { min-width: ($_marks_length - 3px); }
	}
}
