@mixin line(
  $name,
  $animation,
  $animationDelay,
  $top,
  $left: auto,
  $right: auto
) {
  height: 70px;
  width: 1.5px;
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  animation: #{$name} $animation;
  animation-delay: $animationDelay;
  top: $top;
  left: $left;
  right: $right;

  @keyframes #{$name} {
    0% {
      background: transparent;
      height: 0;
    }

    50% {
      background: white;
      height: 100px;
    }

    100% {
      margin-top: 50px;
      height: 150px;
    }
  }
}

@mixin cloud(
  $name,
  $animation,
  $animationDelay,
  $dimension,
  $zIndex,
  $top,
  $right,
  $keyFrameMarginTop
) {
  position: absolute;
  animation: #{$name} $animation;
  animation-delay: $animationDelay;
  height: $dimension;
  width: $dimension;
  z-index: $zIndex;
  top: $top;
  right: $right;

  @keyframes #{$name} {
    100% {
      margin-top: $keyFrameMarginTop;
    }
  }
}

.plane-animation-loader {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background-color: $color-blue-300;
  border-radius: 50%;

  &-plane {
    animation: plane 5s infinite;
    position: absolute;
    z-index: 0;
    top: 25%;
    right: 25%;
    width: 50%;
    height: 50%;
  }

  @keyframes plane {
    0% {
      right: 25%;
    }

    50% {
      right: 28%;
    }

    100% {
      right: 25%;
    }
  }

  &-line1 {
    @include line(
      $name: line1,
      $animation: 1.5s infinite,
      $animationDelay: 0s,
      $top: 60%,
      $left: 30%
    );
  }

  &-line2 {
    @include line(
      $name: line2,
      $animation: 1.5s infinite,
      $animationDelay: 5s,
      $top: 65%,
      $left: 35%
    );
  }

  &-line3 {
    @include line(
      $name: line3,
      $animation: 1.5s infinite,
      $animationDelay: 5s,
      $top: 75%,
      $left: 47.5%
    );
  }

  &-line4 {
    @include line(
      $name: line4,
      $animation: 1.5s infinite,
      $animationDelay: 4s,
      $top: 80%,
      $right: 47.5%
    );
  }

  &-line5 {
    @include line(
      $name: line5,
      $animation: 1.5s infinite,
      $animationDelay: 3s,
      $top: 65%,
      $right: 34.5%
    );
  }

  &-line6 {
    @include line(
      $name: line6,
      $animation: 1.5s infinite,
      $animationDelay: 1s,
      $top: 60%,
      $right: 29.5%
    );
  }

  &-cloud1 {
    @include cloud(
      $name: cloud1,
      $animation: 4.5s linear infinite,
      $animationDelay: .2s,
      $dimension: 73px,
      $zIndex: 1,
      $top: -70px,
      $right: 30px,
      $keyFrameMarginTop: 650px
    );
  }

  &-cloud2 {
    transform: rotate(65deg);

    @include cloud(
      $name: cloud2,
      $animation: 10s linear infinite,
      $animationDelay: 0s,
      $dimension: 199px,
      $zIndex: 0,
      $top: -165px,
      $right: 100px,
      $keyFrameMarginTop: 1850px
    );
  }

  &-cloud3 {
    transform: rotate(35deg);

    @include cloud(
      $name: cloud3,
      $animation: 3.75s linear infinite,
      $animationDelay: .4s,
      $dimension: 94px,
      $zIndex: 1,
      $top: -75px,
      $right: 100px,
      $keyFrameMarginTop: 325px
    );
  }

  &-cloud4 {
    transform: rotate(25deg);

    @include cloud(
      $name: cloud4,
      $animation: 4s linear infinite,
      $animationDelay: 1.5s,
      $dimension: 199px,
      $zIndex: 0,
      $top: -200px,
      $right: -40px,
      $keyFrameMarginTop: 850px
    );
  }
}