@import "ui-variables";
@import "ui-mixins";


@keyframes sending-progress-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.draft-list {
  .sending {
    background-color: @background-primary;
    &:hover {
      background-color: @background-primary;
    }
  }

  .sending-progress {
    display: block;
    height: 7px;
    align-self: center;
    background-color: @background-primary;
    border-bottom:1px solid @border-color-divider;
    position: relative;

    .filled {
      display: block;
      background: @component-active-color;
      height:6px;
      width: 0; //overridden by style
      transition: width 1000ms linear;
    }
    .indeterminate {
      display: block;
      background: @component-active-color;
      height:6px;
      width: 100%;
    }
    .indeterminate:after {
      content: "";
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
      );
      background-size: 50px 50px;
      animation: sending-progress-move 2s linear infinite;
    }
  }
}