@keyframes rainbow {
	0% {
		color: hsl(0deg 90% 50%);
	}

	10% {
		color: hsl(36deg 90% 50%);
	}

	20% {
		color: hsl(72deg 90% 50%);
	}

	30% {
		color: hsl(108deg 90% 50%);
	}

	40% {
		color: hsl(108deg 90% 50%);
	}

	50% {
		color: hsl(180deg 90% 50%);
	}

	60% {
		color: hsl(216deg 90% 50%);
	}

	70% {
		color: hsl(252deg 90% 50%);
	}

	80% {
		color: hsl(288deg 90% 50%);
	}

	90% {
		color: hsl(324deg 90% 50%);
	}

	100% {
		color: hsl(360deg 90% 50%);
	}
}

.animation-level-slider {
	&__state-icons {
		width: 1.2rem;
		height: 80px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: 500ms;
	}

	&--off {
		.animation-level-slider__state-icons {
			transform: translateY(-37%)
		}

		.setting__value--colored {
			--hue: 0;
		}
	}

	&--mild {
		.animation-level-slider__state-icons {
			transform: translateY(0)
		}

		.setting__value--colored {
			--hue: 100;
		}
	}

	&--frisky {
		.animation-level-slider__state-icons {
			transform: translateY(37%);
		}

		.setting__value--colored {
			animation: rainbow 10s ease infinite;
		}
	}
}
