@use 'sass:list';
@use "sass:map";

@use "../../hippie-style/hippie";

$colors: hippie.$color_palette;
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);

@function getColor($index, $colors) {
	$color_keys: map.keys($colors);
	$key_count: list.length($color_keys);
	$cycled_index: ($index % $key_count) + 1;
	$key: list.nth($color_keys, $cycled_index);
	@return map.get($colors, $key);
}

@mixin fadeColors($steps, $colors) {
	@keyframes fadeColor {
		@for $i from 1 through list.length($steps) {
			$percent: list.nth($steps, $i);
			$color: getColor($i - 1, $colors);

			#{$percent}% {
				background-color: $color;
			}
		}
	}

	animation: fadeColor 16s infinite linear;
}

.body_mwo {
	@extend .h_full_view;

	canvas {
		@include fadeColors($steps, $colors);

		display: block;
		cursor: none;
	}

	.controls {
		position: fixed;
		top: 0;
		left: 0;
		border-radius: hippie.$radius_basic;
	}
}