@primary-color: #0c72cc;
@primary-dark: #45a8ff;
@primary-light: @primary-color;

@complementary-color: spin(@primary-color, 180);
@complementary-dark: spin(@primary-dark, 180);
@complementary-light: spin(@primary-light, 180);

@adjust-primary-for-contrast: true;

@white: #ffffff;
@black: #000000;

@mix-percentage: 2%;
@mix-colors: true;

.grays(@base: @black) {
	@min: 0;
	@max: 24;

	@is-dark: boolean(lightness(@base) < 50%);

	.multi(@i) {
		@p1: min(max((@i / @max), 0), 1);
		@p2: (@i / @max * 100);
		@result: unit(@p2 * @p1, %);
	}

	each(range(@min, @max, 1), {
		@v: .multi(@value)[@result];
		@percentage: if(@is-dark, (100% - @v), @v);

		--gray-@{value}: if(@mix-colors, mix(@primary-color, hsl(0, 0%, @percentage), @mix-percentage), color(hsl(0, 0%, @percentage)));
	})
}

.shades(@name, @clr, @mix: true) {
	@hue: hue(@clr);
	@saturation: saturation(@clr);

	@hsl-100: hsl(@hue, @saturation, (9 / 10) * 100%);
	@hsl-200: hsl(@hue, @saturation, (8 / 10) * 100%);
	@hsl-300: hsl(@hue, @saturation, (7 / 10) * 100%);
	@hsl-400: hsl(@hue, @saturation, (6 / 10) * 100%);
	@hsl-500: hsl(@hue, @saturation, (5 / 10) * 100%);
	@hsl-600: hsl(@hue, @saturation, (4 / 10) * 100%);
	@hsl-700: hsl(@hue, @saturation, (3 / 10) * 100%);
	@hsl-800: hsl(@hue, @saturation, (2 / 10) * 100%);
	@hsl-900: hsl(@hue, @saturation, (1 / 10) * 100%);

	& {
		--@{name}-100: if(@mix and @mix-colors, mix(@primary-color, @hsl-100, @mix-percentage), rgb(@hsl-100));
		--@{name}-200: if(@mix and @mix-colors, mix(@primary-color, @hsl-200, @mix-percentage), rgb(@hsl-200));
		--@{name}-300: if(@mix and @mix-colors, mix(@primary-color, @hsl-300, @mix-percentage), rgb(@hsl-300));
		--@{name}-400: if(@mix and @mix-colors, mix(@primary-color, @hsl-400, @mix-percentage), rgb(@hsl-400));
		--@{name}-500: if(@mix and @mix-colors, mix(@primary-color, @hsl-500, @mix-percentage), rgb(@hsl-500));
		--@{name}-600: if(@mix and @mix-colors, mix(@primary-color, @hsl-600, @mix-percentage), rgb(@hsl-600));
		--@{name}-700: if(@mix and @mix-colors, mix(@primary-color, @hsl-700, @mix-percentage), rgb(@hsl-700));
		--@{name}-800: if(@mix and @mix-colors, mix(@primary-color, @hsl-800, @mix-percentage), rgb(@hsl-800));
		--@{name}-900: if(@mix and @mix-colors, mix(@primary-color, @hsl-900, @mix-percentage), rgb(@hsl-900));
	}
}