@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, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
      background-size: 50px 50px;
      animation: sending-progress-move 2s linear infinite;
    }
  }
}