@use 'mixins/mixins' as *;
@use 'common/var' as *;

@include b(weather) {
  width: 300px;
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  --cloud-border-radius: 100px;
  --cloud-background-color: #fff;
  --overcast-background-color: #484f59;
  --rain-background-color: #05a2eb;
  --cloud-filter-shadow: #0001;
  --cloud-box-shadow: rgba(0, 0, 0, 0.12);

  .cloud {
    position: relative;
    width: 220px;
    height: 80px;
    background-color: var(--cloud-background-color);
    border-radius: var(--cloud-border-radius);
    filter: drop-shadow(8px 8px 0 var(--cloud-filter-shadow));
    box-shadow: 0px 0px 12px var(--cloud-box-shadow);
    animation: animateCloud 2s steps(1) infinite;

    &::before {
      content: '';
      position: absolute;
      top: -20%;
      left: 20%;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--overcast-background-color);
      box-shadow: 60px -10px 0 20px var(--overcast-background-color);
    }
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--cloud-border-radius);
      background: var(--overcast-background-color);
    }

    .raindrop {
      position: absolute;
      top: 0;
      width: 2px;
      height: 10px;
      transform-origin: bottom;
      background: var(--rain-background-color);
      animation: animateRain 2s linear infinite;
    }
  }

  @keyframes animateCloud {
    0% {
      filter: drop-shadow(8px 8px 0 var(--cloud-filter-shadow))
        drop-shadow(0 0 0 var(--cloud-background-color)) brightness(1);
    }
    95% {
      filter: drop-shadow(8px 8px 0 var(--cloud-filter-shadow))
        drop-shadow(0 0 50px var(--cloud-background-color)) brightness(10);
    }
  }

  @keyframes animateRain {
    0% {
      transform: translateY(0) scaleY(1);
    }
    70% {
      transform: translateY(260px) scaleY(1);
    }
    80% {
      transform: translateY(260px) scaleY(0.2);
    }
    100% {
      transform: translateY(260px) scaleY(0.2) scaleX(15);
    }
  }
}