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);
  }

  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;
    }
  }
}