<template>
  <div :style="`--_star_color:${color_n3}; --_shadow_color:${color_n4};--g_x:${w}px;--g_h:${h}px;`" class="night">
    <div v-for="(t, nqc) in star_count" :key="nqc" class="shooting_star"></div>
    <div :class="`cover_overlay ${overlayer} ${overlayerColor}`"
         :style="`--from_x:${color_n1}; --to_x:${color_n2};--g_x:${w}px;--g_h:${h}px;`"></div>
  </div>
</template>
<script>
import elementbase from "../mixins/tools/elementbase"

export default {
  name: "BgShootingstar",
  mixins: [elementbase],
  props: {
    color_n1: {
      type: String,
      required: false,
      default: "#507a4b"
    },
    color_n2: {
      type: String,
      required: false,
      default: "#4fca40"
    },
    color_n3: {
      type: String,
      required: false,
      default: "#2ddb17"
    },
    color_n4: {
      type: String,
      required: false,
      default: "#239614"
    },
    stroke: {
      type: String,
      required: false,
      default: "#000000"
    }
  },
  data() {
    return {
      star_count: []
    }
  },
  mounted() {
    for (let k = 0; k < 17; k++) {
      this.star_count.push({ k: "f" })
    }
  }
}
</script>
<style scoped lang="scss">

.background-exstars {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
}

.night {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateZ(45deg);
  // animation: sky 200000ms linear infinite;

  $shooting-time: 3000ms;
  $background_start_color: var(--_star_color);
  $background_shadow_color: var(--_shadow_color);

  .shooting_star {
    position: absolute;
    left: 50%;
    top: 50%;

    height: 2px;
    background: linear-gradient(-45deg, $background_start_color, rgba(0, 0, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px $background_shadow_color);
    animation: tail $shooting-time ease-in-out infinite, shooting $shooting-time ease-in-out infinite;

    &::before {
      content: '';
      position: absolute;
      top: calc(50% - 1px);
      right: 0;

      height: 2px;
      background: linear-gradient(-45deg, rgba(0, 0, 255, 0), $background_start_color, rgba(0, 0, 255, 0));
      transform: translateX(50%) rotateZ(45deg);
      border-radius: 100%;
      animation: shining $shooting-time ease-in-out infinite;
    }

    &::after {
      @extend .shooting_star::before;
      transform: translateX(50%) rotateZ(-45deg);
    }

    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        $delay: random(9999) + 0ms;
        top: calc(50% - #{random(400) - 200px});
        left: calc(50% - #{random(300) + 0px});
        animation-delay: $delay;
        // opacity: random(50) / 100 + 0.5;

        &::before,
        &::after {
          animation-delay: $delay;
        }
      }
    }
  }

}

@keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(45 + 360deg);
  }
}
</style>
