@import "../../../style/colors";
svg {
  shape-rendering: geometricPrecision
}

g, path, circle, rect {
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-direction: normal;
}

/* LIGHTNING */
.climacon_component-stroke_lightning {
  fill-opacity: 0;
  animation-name: thunderstorm-lightningFlash;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-out;
  animation-duration: 12s;
}

.climacon_wrapperComponent-cloud {
  fill: $color-cloud;
}

.climacon_wrapperComponent-lightning {
  fill: $color-sun;
}

@keyframes thunderstorm-lightningFlash {
  0% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }

  1% {
    fill-opacity: 1;
    stroke-opacity: 1;
  }

  7% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }

  50% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }

  51% {
    fill-opacity: 1;
    stroke-opacity: 1;
  }

  53% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }

  54% {
    fill-opacity: 1;
    stroke-opacity: 1;
  }

  60% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }
}