/*Make background of component different on hover, depending on base var*/
.hoverable-component {
  &:hover {
    background-color: rgb(from var(--background-color) calc(r + 10) calc(g + 10) calc(b + 10) / var(--opacity));
  }
}

/*Make background of component different on click, depending on base var, inverse of hover*/
.clickable-component {
  &:active {
    background-color: rgb(from var(--background-color) calc(r - 10) calc(g - 10) calc(b - 10) / var(--opacity));
  }
}

/*FadingGlowing effect for text that updates, add className and put the updating value as key*/
@keyframes glow {
  from {
    text-shadow: 0 0 var(--glow-size) var(--mantine-color-text);
  }
  to {
    text-shadow: none;
  }
}

.text-flash {
  animation: glow 1s ease-in-out;
}

/*Animated weather icons, used by clock and weather widgets*/
.weather-anim-wrapper {
  display: inline-flex;
}

@keyframes weather-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes weather-drift {
  0%,
  100% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
}

@keyframes weather-fall {
  0% {
    transform: translateY(-2px);
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(2px);
    opacity: 0.4;
  }
}

@keyframes weather-flicker {
  0%,
  90%,
  100% {
    opacity: 1;
  }
  92%,
  96% {
    opacity: 0.4;
  }
}

.weather-anim-sun {
  animation: weather-spin 16s linear infinite;
  transform-origin: center;
}

.weather-anim-cloud,
.weather-anim-fog {
  animation: weather-drift 4s ease-in-out infinite;
}

.weather-anim-rain,
.weather-anim-snow {
  animation: weather-fall 1.6s ease-in-out infinite;
}

.weather-anim-storm {
  animation: weather-flicker 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .weather-anim-sun,
  .weather-anim-cloud,
  .weather-anim-fog,
  .weather-anim-rain,
  .weather-anim-snow,
  .weather-anim-storm {
    animation: none;
  }
}