@include keyframes(fadeIn) { from { opacity:0; } to { opacity:1; } }
@include keyframes(pulse) {
  0% {
    @include transform(scale(1));
  }

  25% {
    @include transform(scale(1.1));
    border-color: lighten(#5585ff, 20%)
  }

  75% {
    @include transform(scale(0.9));
    border-color: lighten(#5585ff, 0%)
  }

  100% {
    @include transform(scale(1));
  }
}

.upload-button .abort{
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in-out 1;
    -moz-animation:fadeIn ease-in-out 1;
    animation:fadeIn ease-in-out 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.15s;
    -moz-animation-duration:0.15s;
    animation-duration:0.15s;

    -webkit-animation-delay: 0.125s;
    -moz-animation-delay: 0.125s;
    animation-delay: 0.125s;
}


  .upload-button{
    // width: em(70);
    position:relative;
    // overflow:hidden;
    background-color:transparent;
    outline:none;
    width: em(30);
    height: em(30);
    padding: 0;
    color: lighten(#5585ff, 10%);
    margin-top: 0;
    cursor: pointer;
    text-align:center;
    border-radius: em(15);
    border:2px solid lighten(#5585ff, 10%);
    text-transform:lowercase;
    @include transition(all 0.1s ease-in-out);

    &:hover {
      border:2px solid darken(#5585ff, 5%);
    }
    &:active {
      @include transform(scale(.9,.9));
    }
    &.inactive {
      border-color: $midgray;
    }

    &.abort{
      border-color: $red;
      &:hover {
        border-color: darken($red, 5%);
      }
    }
    &.adding{
      @include animation(pulse .9s ease-in-out infinite);
    }
    &.done{
      border-color: $green;
      &:hover {
        border-color: darken($green, 5%);
      }
    }
    &.adding, &.done{
      cursor: default;
    }
    .abort{

      div{
      }
    }
  }
