.entity-attribute-documents
  position: relative
  padding-bottom: 20px

  ul.files
    position: relative
    margin: 10px 0 0 205px
    width: calc(100% - 205px)
    min-height: 260px
    padding: 0

    .document
      position: relative
      +flex(space-between, center)
      width: 100%
      max-width: 720px
      height: 82px
      padding: 10px
      //background-color: $almostWhite
      //border: 2px solid transparent
      transition: opacity 0.4s, border 0.4s

      //&:after
      //  content: ''
      //  position: absolute
      //  bottom: 0
      //  left: 0
      //  display: none
      //  border: 1px dotted $lightGray
      //  height: 82px
      //  width: 100%
      //
      //&.isDropTarget
      //  height: 174px
      //  padding-bottom: 92px
      //
      //  &:after
      //    display: block



      &.deleted
        opacity: 0.4
        border-color: lighten($neonRed, 10%)

      + .document
        margin-top: 2px
        border-top: 1px solid $blueGray

      >input[type='file']
        display: none

      .thumb
        display: block
        width: 50px
        height: 50px
        border-radius: 100%
        background:
          color: $almostWhite
          position: center
          size: cover

        &[data-filetype='svg']
          background-color: #F9C80E
        &[data-filetype='pdf']
          background-color: #EA3546
        &[data-filetype='zip'], &[data-filetype='rar']
          background-color: #f5cf56
        &[data-filetype='csv'], &[data-filetype='xlsx']
          background-color: #227045
        &[data-filetype='mp3']
          background-color: #43BCCD
        &[data-filetype='mp4']
          background-color: #3066BE
        &[data-filetype='docx'], &[data-filetype='docx']
          background-color: #2C5697
        &[data-filetype='png'], &[data-filetype='jpg'], &[data-filetype='jpeg'], &[data-filetype='gif']
          background-color: #262f43


        &:not(.has-image):not(.has-icon)
          +flex(center, center)
          &:after
            content: "."attr(data-filetype)
            font-weight: bold
            text-transform: uppercase
            font-size: 0.7rem
            line-height: 1.2
            color: $gray

      .content-wrapper
        width: calc(100% - 100px)
        padding: 0 10px

        input
          text-indent: 0
          padding: 10px
          min-height: auto
          //background-color: rgba($lightest-gray, 0.5)
          background-color: $almostWhite
          +attribute-focus

        p
          margin: 5px 0 0
          padding: 0 10px
          color: $light-gray
          font-size: 0.7rem
          line-height: 1.2

      .drag-icon
        width: 30px
        height: 30px
        +flex(flex-start, center)
        cursor: move

        &:after
          content: ''
          background:
            position: center
            repeat: no-repeat
            size: contain
            image: url("/img/kms/icons/drag-dots.svg")
          width: 9px
          height: 16px
          opacity: 0.2

      .delete
        //position: absolute
        //right: 5px
        //top: 5px
        +flex(center, center)
        cursor: pointer
        border-radius: 100%
        width: 24px
        height: 24px
        font-size: 13px
        line-height: 13px
        background-color: transparent
        border: 2px solid transparent
        transition: color 0.3s, background-color 0.3s, border 0.3s

        &:before
          content: ''
          display: inline-block
          height: 10px
          width: 10px
          background:
            image: url("/img/kms/icons/icon_cross_red.svg")
            position: center
            size: contain
            repeat: no-repeat

        &:hover
          background-color: lighten($neonRed, 10%)
          color: white

          &:before
            background-image: url("/img/kms/icons/icon_cross.svg")

      &:last-child
        margin-top: 15px
        padding: 0
        //background-color: green
        height: 260px

        .thumb, .content-wrapper, .delete
          display: none !important

        >input[type='file']
          display: block
          opacity: 0


  .drag-and-drop-area
    position: absolute
    left: 0
    bottom: 20px
    height: 260px
    border: 2px dashed $lightGray
    text-align: center
    margin-left: 205px
    line-height: 1rem
    width: 100%
    max-width: 700px
    padding: 30px

    .icon
      display: inline-block
      width: 95px
      height: 78px
      margin-bottom: 20px
      background:
        image: url("/img/kms/icons/drag-and-drop-cloud.svg")
        position: center
        size: contain
        repeat: no-repeat

    p
      margin: 0
      color: $gray
      font-size: 0.7rem
      line-height: 1.2

    .or
      display: inline-block
      margin: 10px 0
      font-size: 0.8rem
      line-height: 1.2
      color: $lightGray

    .button
      display: block
      width: 100%
      max-width: 250px
      margin: 0 auto
      padding: 10px 20px
      border-radius: 4px
      border: 1px solid $blue

      font-size: 0.9rem
      line-height: 1.2
      color: $blue


  //input
  //  display: block
  //  +size(100% 100%)
  //  +box-sizing(border-box)
  //  background-color: transparent
  //  padding-left: 205px
  //  padding-top: grid-row(.75)
  //  padding-bottom: 0
  //  border: none
  //  line-height: grid-row(.5)
  //  +attribute-focus