article.content > figure {

@include display(flex);
@include flex-direction(column);
@include transition(background-color 0.3s);
background-color: #EEE;
overflow: hidden;

&.dropping div[contenteditable] {
  background-color: rgb(122, 199, 122);
  padding: 1em;
}

figcaption {
  padding: 1em;
}

& > div[contenteditable] {
  @include display(flex);
  @include align-items(center);
  @include justify-content(flex-end);
  @include flex-direction(column);
  @include flex(1);
  cursor: pointer;
  width: 100%;
  box-shadow: 0 0 3px 0 #aaa;

  &:hover {
    background-color: #CCC;
  }

  & > .progressbar {
    @include flex(0 auto);
    width: 100%;
    & > span.progress {
      @include transition(width 0.3s ease-out);
      display: block;
      height: 2px;
      width: 0%;
      background: #B9C8BA;
    }
  }

  & > img {
    max-width: 100%;
  }

  & > p {
    padding: 2em 0;
    text-align: center;
  }

  & > input[type=file] {
    display: none;
  }
}

}