.Formol_Field--type-file
  max-width: 100%
  width: $formol-big-field-size


.Formol_FileField
  @extend .Formol_Field__element
  border-style: dashed
  color: inherit
  padding: 0
  position: relative
  width: 100%

  &__hidden-input
    +hidden-input


  &__dropzone
    > input[type="file"]
      // This is an important hack to avoid the :
      // "An invalid form control with name="..."
      // is not focusable." error at validation
      display: block !important
      +hidden-input

  &__placeholder
    align-items: flex-start
    cursor: pointer
    display: flex
    flex-wrap: wrap
    transition: color .2s
    width: 100%

    > svg
      display: block
      font-size: $formol-font-size * 2
      margin: 1em auto .1em
      width: 100%

    > span
      display: block
      font-size: $formol-font-size * .85
      margin: 0 auto 3em


  &__previews
    align-items: flex-start
    display: flex
    flex-wrap: wrap

  &__preview
    border: solid 1px
    color: $formol-color
    margin: 1em
    min-width: 8em
    max-width: 10em
    position: relative

    img
      max-width: 100%

    &-caption
      box-sizing: border-box
      border-top: solid 1px
      font-size: $formol-font-size * .75
      padding: .5em

    &-name, &-size, &-type
      display: block
      margin: .25rem .5rem

    &-name
      line-height: 1.5
      max-height: calc(1em * 1.5)
      overflow: hidden
      text-overflow: ellipsis
      transition: max-height .25s
      width: calc(100% - 1rem)

      &:hover
        max-height: 10em

    &--error
      color: $formol-color-error


  &__close
    border: solid 1px
    cursor: pointer
    font-size: 0
    background-color: #fff
    padding: 0
    position: absolute
    right: -1px
    top: -1px
    transition: background-color .25s

    svg
      font-size: 1rem
      margin: .5em


  &__image-delete
    min-height: 3em


.Formol_Field--readOnly
  .Formol_FileField__preview
    margin-left: 0
    margin-top: 0