@charset "UTF-8";

@mixin overshoot(
	$p,
	$t: normal,
	$c: gtk("@theme_fg_color")
) {
	//
	// overshoot
	//
	// $p: position
	// $t: type
	// $c: base color
	//
	// possible $p values:
	// top, bottom, right, left
	//
	// possible $t values:
	// normal, backdrop
	//

	$_small_gradient_length: 5%;
	$_big_gradient_length: 100%;

	$_position: center top;
	$_small_gradient_size: 100% $_small_gradient_length;
	$_big_gradient_size: 100% $_big_gradient_length;

	@if $p==bottom {
		$_position: center bottom;
		$_linear_gradient_direction: to top;
	} @else if $p==right {
		$_position: right center;
		$_small_gradient_size: $_small_gradient_length 100%;
		$_big_gradient_size: $_big_gradient_length 100%;
	} @else if $p==left {
		$_position: left center;
		$_small_gradient_size: $_small_gradient_length 100%;
		$_big_gradient_size: $_big_gradient_length 100%;
	}

	$_small_gradient_color: $c;
	$_big_gradient_color: $c;

	@if $c==gtk("@theme_fg_color") {
		$_small_gradient_color: gtkshade("@borders", 0.9);
		$_big_gradient_color: gtk("@theme_fg_color");

		@if $t==backdrop {
			$_small_gradient_color: gtk("@unfocused_borders");
		}
	}

	$_small_gradient: radial-gradient(
		circle,
		$_small_gradient_color 0%,
		gtkalpha($_small_gradient_color, 0) 5px
	);

	$_big_gradient: radial-gradient(
		circle,
		gtkalpha($_big_gradient_color, 0.07) 0%,
		gtkalpha($_big_gradient_color, 0) 6px
	);

	@if $t==normal {
		background-image: $_small_gradient, $_big_gradient;
		background-size: $_small_gradient_size,
			$_big_gradient_size;
	} @else if $t==backdrop {
		background-image: $_small_gradient;
		background-size: $_small_gradient_size;
	}

	background-repeat: no-repeat;
	background-position: $_position;

	background-color: transparent; // reset some properties to be sure to not inherit them somehow
	border: none; //
	box-shadow: none; //
}

scrolledwindow {
	// This is used when content is touch-dragged past boundaries.
	// draws a box on top of the content, the size changes programmatically.
	overshoot {
		&.top {
			@include overshoot(top);

			&:backdrop {
				@include overshoot(top, backdrop);
			}
		}

		&.bottom {
			@include overshoot(bottom);

			&:backdrop {
				@include overshoot(bottom, backdrop);
			}
		}

		&.left {
			@include overshoot(left);

			&:backdrop {
				@include overshoot(left, backdrop);
			}
		}

		&.right {
			@include overshoot(right);

			&:backdrop {
				@include overshoot(right, backdrop);
			}
		}
	}

	// Overflow indication, works similarly to the overshoot, the size if fixed tho.
	undershoot {
		background-image: none;
		border: none;
	}
}
