@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_game {
	@extend .h_full_view;
	background-color: hotpink;

	footer {
		@extend .pos_abs;
		@extend .pin_bottom;
		@extend .width_full;

		.brand {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: flex-end;
			gap: hippie.$space_half hippie.$space_basic;

			margin: hippie.$space_basic hippie.$space_double;

			& > svg {
				height: 32px;
				width: 32px;
			}
		}
	}
}

.body_fpv {
	@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;
	}
}