.upload-list {
  &__success,
  .tooltip,
  .indicator-percentage {
    opacity: 0;
  }

  &__link {
    color: $upload-list-link-color;
    flex: 1;
    margin-right: 10px;
    overflow: hidden;
    padding: ($baseline * 1.7) 0 ($baseline * 1.9);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__info {
    white-space: nowrap;
  }

  &__item {
    @include font-style('body--m');
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    opacity: 1;
    padding-right: 30px;
    position: relative;
    width: 100%;

    .button--icon-only {
      height: $icon-size--s;
      position: absolute;
      right: 0;
      top: $baseline * 2.3;
      width: $icon-size--s;
    }

    svg {
      transition: fill $transition-duration--fast;
    }

    &.closable {
      overflow: visible;
    }

    &.closable--closed {
      border: 0 solid transparent;
      overflow: hidden;
    }

    .indicator-percentage {
      margin-top: 0;
      position: absolute;
      right: 0;
      transition: opacity $transition-duration--slow,
        width 0s $transition-duration--slow;
    }
  }
  // item : error & success
  &__item--error,
  &__item--success {
    .indicator-percentage {
      opacity: 0;
      width: 0;
    }
  }
  // item : error
  &__item--error {
    .upload-list__link {
      @include form-field--feedback-color;
    }

    .tooltip {
      opacity: 1;
    }

    // only add delay if item is not being closed
    &:not(.closable--closed) {
      .upload-list__info,
      .upload-list__remove,
      .tooltip {
        transition-delay: $transition-duration--slow;
      }
    }

    .upload-list__info {
      margin-right: 5px;
    }
  }
  // item : success
  &__item--success .upload-list {
    &__link {
      @include text--positive;
    }

    &__success {
      animation: fade-out $transition-duration--slow 2s forwards;
      opacity: 1;
      transition-delay: $transition-duration--slow;
    }

    &__info,
    &__remove {
      animation: fade-in $transition-duration--fast 2.5s forwards;
      opacity: 0;
    }
  }

  &__item--success.closable--closed .upload-list__info {
    animation: none;
  }
  // item : uploading
  &__item--uploading {
    .upload-list__info,
    .upload-list__remove {
      opacity: 0;
      pointer-events: none;
    }

    .indicator-percentage {
      opacity: 1;
      width: 80px;
    }
  }
  // tooltip
  .tooltip {
    &__trigger {
      height: $icon-size;
      width: $icon-size;
    }

    .icon {
      cursor: pointer;
    }

    svg {
      @include form-field--feedback-color;
    }

    &__content {
      left: inherit;
      min-width: 105px;
      right: -10px;
    }

    &__pointer {
      left: initial;
      right: 15px;
    }
  }
}
