/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

#downloads-indicator-progress-icon {
  background: var(--downloads-indicator-image-attention) bottom no-repeat;
  background-size: 18px;
  margin-top: 18px;
  /* From javascript side we use animation delay from 0s to -100s to show
   * corresponding frames needed for progress.
   * animation-delay is set to a positive value to make nothing shown.
   */
  animation-play-state: paused;
  animation-delay: 1s;
  animation-duration: 100s;
  animation-timing-function: linear;
  animation-name: indicatorArrowProgress;
}

toolbar[brighttext] #downloads-indicator-progress-icon {
  background-image: var(--downloads-indicator-image-attention-inverted);
  animation-name: indicatorArrowProgressDark;
}

@keyframes indicatorArrowProgress {
  0% {
    margin-top: 12px;
    filter: brightness(1.2);
  }
  100% {
    margin-top: 2px;
    filter: brightness(1);
  }
}

@keyframes indicatorArrowProgressDark {
  0% {
    margin-top: 12px;
    filter: brightness(0.7);
  }
  100% {
    margin-top: 2px;
    filter: brightness(1);
  }
}

#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
  animation-name: downloadsIndicatorStartJump;
  /* Upon changing the overall duration below, please keep the delay time of
     setTimeout() identical in indicator.js for this animation. */
  animation-duration: 0.5s;
  animation-delay: 1s;
  animation-iteration-count: 2;
}

@keyframes downloadsIndicatorStartJump {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-3px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
  }
}