.custom-scroll(@background, @thumb, @width: 8px, @height: 8px) {
	-webkit-overflow-scrolling: touch;

	&::-webkit-scrollbar {
		height: @height;
		width: @width;
		background: @background;
	}

	&::-webkit-scrollbar-thumb {
		background-color: @thumb;
		-webkit-border-radius: 50px;
	}

	&::-webkit-scrollbar-corner {
		background-color: @background;
	}
}

.gradient(@startColor: #eee, @endColor: white) {
	background: linear-gradient(to top, @startColor, @endColor);
}

.input-shade(@color, @bg) {
	input,
	select,
	textarea {
		color: @color;
		background-color: transparent;
		border-color: mix(contrast(@bg), @bg, 10%);
		border-style: solid;

		&::placeholder {
			color: mix(@color, @bg, 75%);
		}

		&[disabled] {
			background-color: mix(contrast(@bg), @bg, 10%);
		}
	}

	.diabled label,
	[disabled] label {
		color: mix(@color, @bg, 75%);
	}

	.-autocomplete-container {
		background-color: mix(contrast(@bg), @bg, 10%);
	}

	.-autocomplete-item.selected {
		background-color: mix(contrast(@bg), @bg, 20%);
	}

	input[type="button"],
	input[type="submit"] {
		color: @color;
		background: mix(contrast(@bg), @bg, 10%);
		border-color: mix(contrast(@bg), @bg, 10%);
	}
}

.blink(@color) {
	animation-duration: 1000ms;
	animation-name: blink;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	@keyframes blink {
		from {
			color: @color;
		}

		to {
			opacity: inherit;
		}
	}

	@-webkit-keyframes blink {
		from {
			color: @color;
		}

		to {
			color: inherit;
		}
	}
}

.linkColors(@color, @hover) {
	transition: color 0.2s ease-out;
	color: @color;

	&:hover {
		color: @hover;
	}
}

.buttonColors(@color, @bg) {
	transition: color 0.2s ease-out, background-color 0.2s ease-out;
	color: @color;
	background-color: @bg;

	&:hover {
		color: mix(@color, contrast(@bg), 60%);
		background-color: mix(@bg, contrast(@color), 60%);
	}
}
