@keyframes candy-stripe {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 4px 0;
  }
}

$progress-bar--height: 3px;

$progress-bar--fill: $green;
$progress-bar--fill--checking: #8899a8;
$progress-bar--fill--completed: $blue;
$progress-bar--fill--error: #e95779;
$progress-bar--fill--error--stopped: #f2acbc;
$progress-bar--fill--selected: #fff;
$progress-bar--fill--selected--stopped: #5daaeb;
$progress-bar--fill--stopped: #e7ebee;

$progress-bar--track--background: rgba($green, 0.15);
$progress-bar--track--background--checking: rgba(#8899a8, 0.15);
$progress-bar--track--background--completed: rgba($blue, 0.15);
$progress-bar--track--background--error: rgba(#e95779, 0.15);
$progress-bar--track--background--error--stopped: rgba(#f2acbc, 0.15);
$progress-bar--track--background--selected: rgba(#fff, 0.15);
$progress-bar--track--background--selected--stopped: rgba(#5daaeb, 0.15);
$progress-bar--track--background--selected--stopped: rgba(#fff, 0.15);
$progress-bar--track--background--stopped: rgba(#e7ebee, 0.35);
$progress-bar--track--background--selected: rgba(#fff, 0.15);

.progress-bar {
  align-items: center;
  display: flex;
  width: 100%;
  z-index: 1;

  &__icon {
    flex: 0 0 auto;
    padding-right: 5px;

    .icon {
      color: $green;
      display: block;
      fill: currentColor;
      height: 12px;
      transition: opacity 0.15s;
      width: 12px;

      .torrent--is-seeding & {
        color: $progress-bar--fill--completed;
      }

      .torrent--is-stopped & {
        color: $progress-bar--fill--stopped;
      }

      .torrent--has-error & {
        color: $progress-bar--fill--error;
      }

      .torrent--is-checking & {
        color: $progress-bar--fill--checking;
      }

      .torrent--is-selected & {
        color: $progress-bar--fill--selected;
      }

      .torrent--is-selected.torrent--is-stopped & {
        color: $progress-bar--fill--selected--stopped;
      }

      .torrent--has-error.torrent--is-stopped & {
        color: $progress-bar--fill--error--stopped;
      }
    }
  }

  &__fill {
    background: $progress-bar--fill;
    display: block;
    height: $progress-bar--height;
    width: 100%;

    .torrent--is-seeding & {
      background: $progress-bar--fill--completed;
    }

    .torrent--is-stopped & {
      background: $progress-bar--fill--stopped;
    }

    .torrent--has-error & {
      background: $progress-bar--fill--error;
    }

    .torrent--is-checking & {
      background: $progress-bar--fill--checking;
    }

    .torrent--is-selected & {
      background: $progress-bar--fill--selected;
    }

    .torrent--is-selected.torrent--is-stopped & {
      background: $progress-bar--fill--selected--stopped;
    }

    .torrent--has-error.torrent--is-stopped & {
      background: $progress-bar--fill--error--stopped;
    }

    &__wrapper {
      background: $progress-bar--track--background;
      flex: 1 1 auto;
      position: relative;
      height: $progress-bar--height;

      .torrent--is-stopped & {
        background: $progress-bar--track--background--stopped;
      }

      .torrent--has-error & {
        background: $progress-bar--track--background--error;
      }

      .torrent--is-selected & {
        background: $progress-bar--track--background--selected;
      }

      .torrent--has-error.torrent--is-stopped & {
        background: $progress-bar--track--background--error--stopped;
      }

      .torrent--is-selected.torrent--is-stopped & {
        background: $progress-bar--track--background--selected--stopped;
        opacity: 1;
      }

      .torrent--is-checking & {
        animation: candy-stripe 0.25s linear infinite;
        background-color: transparent;
        background-image: linear-gradient(-45deg, rgba($progress-bar--track--background--checking, 0) 0,
          rgba($progress-bar--track--background--checking, 0) 25%, rgba($progress-bar--track--background--checking, 0.5) 25%,
          rgba($progress-bar--track--background--checking, 0.5) 50%, rgba($progress-bar--track--background--checking, 0) 50%,
          rgba($progress-bar--track--background--checking, 0) 75%, rgba($progress-bar--track--background--checking, 0.5) 75%,
          rgba($progress-bar--track--background--checking, 0.5) 100%);
        background-size: 4px 4px;
        height: $progress-bar--height;
        top: 0;
      }

      .torrent--is-selected.torrent--is-checking & {
        background-image: linear-gradient(-45deg, rgba(#fff, 0) 0,
          rgba(#fff, 0) 25%, rgba(#fff, 0.5) 25%,
          rgba(#fff, 0.5) 50%, rgba(#fff, 0) 50%,
          rgba(#fff, 0) 75%, rgba(#fff, 0.5) 75%,
          rgba(#fff, 0.5) 100%);
      }
    }
  }
}
