@import "nib"

.dropzone
.dropzone *
.dropzone-previews
.dropzone-previews *
  box-sizing border-box


.dropzone
  position relative
  border 1px solid rgba(0, 0, 0, 0.08)
  background rgba(0, 0, 0, 0.02)
  padding 1em

  &.clickable
    cursor pointer
    .message
      cursor pointer
    *
      cursor default

  .message
    opacity 1

  &.drag-hover
    border-color rgba(0, 0, 0, 0.15)
    background rgba(0, 0, 0, 0.04)

  &.started
    .message
      display none

.dropzone
.dropzone-previews
  .preview
    background rgba(255, 255, 255, 0.8)
    position relative
    display inline-block
    margin 17px

    vertical-align top

    border 1px solid #acacac

    padding 6px 6px 28px 6px

    .details
      width 100px
      height @width
      position relative
      background #ebebeb
      padding 5px

      .filename
        overflow hidden
        height 100%


      img
        absolute top left
        width @width
        height @width

      .size
        absolute bottom -28px left 3px
        height 28px
        line-height @height


    &.error
      .error-mark
        display block
    &.success
      .success-mark
        display block


    &:hover
      .details
        img
          display none
      .success-mark
      .error-mark
        display none


    .success-mark
    .error-mark
      display none
      position absolute

      width 40px
      height 40px

      font-size 30px
      text-align center
      right -10px
      top -10px

    .success-mark
      color #8CC657
    .error-mark
      color #EE162D


    .progress
      position absolute
      top 100px
      left 6px
      right 6px
      height 6px
      background #d7d7d7
      display none

      .upload
        position absolute
        top 0
        bottom 0
        left 0
        width 0%
        background-color #8CC657


    &.processing
      .progress
        display block


    .error-message
      display none
      absolute top -5px left -20px
      background rgba(245, 245, 245, 0.8)
      padding 8px 10px
      color #800
      min-width 140px
      max-width 500px
      z-index 500
    &:hover.error
      .error-message
        display block