/* <<--< PHASE 1 >-->> */
.module {
  transition: padding 0.25s linear;
}

window.HDMI-A-1 #workspaces {
  opacity: 0;
  padding: 0;
  animation:
    workspaces 0.25s linear 0.25s forwards,
    module_expand 0.25s linear 0.35s forwards;
}

#clock,
window.eDP-1 #custom-menu,
window.eDP-1 #custom-distro,
window.eDP-1 #custom-notification,
window.HDMI-A-1 #pulseaudio {
  padding: 0;
  opacity: 0;
  animation:
    module_in 0.25s linear 0.25s forwards,
    module_expand 0.25s linear 0.35s forwards;
}

/* <<--< PHASE 2 >-->> */
window.eDP-1 #workspaces,
window.HDMI-A-1 #taskbar {
  opacity: 0;
  padding: 0;
  animation:
    workspaces 0.25s linear 0.5s forwards,
    module_expand 0.25s linear 0.6s forwards;
}

window.HDMI-A-1 #window,
window.eDP-1 #memory {
  padding: 0;
  opacity: 0;
  animation:
    module_in 0.25s linear 0.5s forwards,
    module_expand 0.25s linear 0.6s forwards;
}

/* <<--< PHASE 3 >-->> */

window.eDP-1 #window,
window.eDP-1 #network {
  padding: 0;
  opacity: 0;
  animation:
    module_in 0.25s linear 0.75s forwards,
    module_expand 0.25s linear 0.85s forwards;
}
/* <<--< PHASE 4 >-->> */

window.eDP-1 #battery {
  padding: 0;
  opacity: 0;
  animation:
    module_in 0.25s linear 1s forwards,
    module_expand 0.25s linear 1.1s forwards;
}

window.eDP-1 #battery.plugged {
  animation:
    module_in 0.25s linear 1s forwards,
    module_expand 0.25s linear 1.1s forwards,
    gradient 5s linear infinite reverse;
}

window.eDP-1 #battery.charging {
  animation:
    module_in 0.25s linear 1s forwards,
    module_expand 0.25s linear 1.1s forwards,
    gradient 5s linear infinite;
}

/* <<--< PHASE 5 >-->> */

window.eDP-1 #pulseaudio {
  padding: 0;
  opacity: 0;
  animation:
    module_in 0.25s linear 1.25s forwards,
    module_expand 0.25s linear 1.35s forwards;
}

/* <<--< PHASE 6 >-->> */

window.eDP-1 #tray,
window.eDP-1 #custom-playerctl,
window.eDP-1 #privacy {
  padding: 0;
  opacity: 0;
  opacity: 0;
  animation:
    module_in 0.25s linear 1.5s forwards,
    module_expand 0.25s linear 1.6s forwards;
}

/* <<--< KEYFRAMES >-->> */

@keyframes module_in {
  to {
    opacity: 1;
    padding: 0 10px;
  }
}

@keyframes module_expand {
  to {
  }
}

@keyframes workspaces {
  to {
    opacity: 1;
    padding: 0 2px;
  }
}

/* <<--< OTHERS >-->> */

/* #battery.charging, */
/* #battery.plugged, */
/* #custom-playerctl.Playing { */
/*   animation: gradient 5s linear infinite; */
/* } */

#battery.charging {
  background: linear-gradient(
      180deg,
      #90ceaa,
      @background-alpha,
      @background-alpha,
      #90ceaa,
      #90ceaa,
      @background-alpha,
      @background-alpha
    )
    0 0 / 750% 750%;
}

#battery.plugged {
  background: linear-gradient(
      180deg,
      #add7ff,
      @background-alpha,
      @background-alpha,
      #add7ff,
      #add7ff,
      @background-alpha,
      @background-alpha
    )
    0 0 / 750% 750%;
  animation: gradient 5s linear infinite reverse;
}

#custom-playerctl.Playing {
  background: linear-gradient(to left, #90ceaa, #add7ff, #90ceaa, #add7ff) 0 0 /
    750% 750%;
  text-shadow: none;
  color: #0f0f0f;
  /* animation-direction: alternate; */
}

@keyframes gradient {
  0% {
    background-position: 10% 25%;
  }
  25% {
    background-position: 25% 50%;
  }
  75% {
    background-position: 50% 75%;
  }
  100% {
    background-position: 75% 100%;
  }
}
