@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -10px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -6px, 0);
  }

  90% {
    transform: translate3d(0, -2px, 0);
  }
}

:host {
  display: block;
}

.icon-dots {
  display: block;
  height: 6px;
  overflow: visible;
}

.icon-dots > .dot {
  fill: currentColor;
  opacity: 0.3;
}

.icon-dots > .dot:nth-of-type(2) {
  animation-duration: 1.25s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: bounce;
  animation-play-state: paused;
  transform-origin: center bottom;
}

:host(.update-downloaded) .icon-dots > .dot:nth-of-type(2) {
  animation-play-state: running;
}