.entity-attribute-documents
  position: relative

  ul.files
    position: relative
    margin: 0
    margin-left: 45px
    width: calc(100% - 45px)
    max-width: 500px
    padding: 0

    .document
      position: relative
      +flex(space-between, center)
      width: 100%
      max-width: 720px
      height: 82px
      padding: 10px
      border: solid 1px $lighter-gray
      border-radius: 5px
      transition: opacity 0.4s, border 0.4s

      &.isDropTarget
        border: 2px dashed #d0d4dc !important

      &.deleted
        display: none

      + .document
        margin-top: 5px

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

      .thumb
        position: relative
        display: block
        width: 50px
        height: 50px
        border-radius: 100%
        overflow: hidden
        background:
          color: $lighter-gray
          position: center
          size: cover

        transition: all 0.3s

        &.hidden
          display: none !important

        &:not(.has-image)

          &[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

        &__image
          position: absolute
          z-index: 1
          left: 0
          top: 0
          width: 100%
          height: 100%
          border-radius: 100%
          background:
            position: center
            size: cover

        &.is-uploading
          border: 1px solid $blue
          width: 49px
          height: 49px
          background-color: $almostWhite !important
          .thumb__image
            filter: blur(1px)

        .percentage
          position: absolute
          z-index: 2
          left: 0
          top: 0
          +flex(center, center)
          width: 100%
          height: 100%
          border-radius: 50%
          overflow: hidden
          opacity: 0.6
          +progressPulse($blue)

      .select
        display: inline-block
        padding: 0.80em 2.2em
        border: 0.1em solid $light-gray
        margin: 0 0.3em 0.3em 0
        border-radius: 0.12em
        box-sizing: border-box
        text-decoration: none
        font-weight: 300
        color: $light-gray
        text-align: center
        transition: all 0.2s
        &:hover
          color: #ffffff
          background-color: $light-gray

        &.hidden
          display: none

      .content-wrapper
        width: calc(100% - 100px)
        padding: 0 10px
        &.hidden
          display: none

        input
          margin-left: 0
          padding: 10px
          min-height: auto
          border-radius: 5px
          border: solid 1px $lighter-gray
          background-color: white
          +attribute-focus

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

          &.path
            font-size: 0
            margin: 0
            line-height: 0

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

        &.is-hidden
          opacity: 0
          cursor: default
          pointer-events: none

        &: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
        +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

        &.hidden
          display: none

        &: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-bottom: 20px


  .drag-and-drop-area
    //bottom: 20px
    height: 260px
    border: 2px dashed $lightGray
    text-align: center
    margin-left: 45px
    line-height: 1rem
    width: 100%
    max-width: 700px
    padding: 30px
    cursor: pointer
    transition: border 0.2s

    &:hover
      border-color: $blue
      background-color: rgba($blue, 0.05)

    .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: rgba($gray, 0.5)

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

      font-size: 0.7rem
      line-height: 1.2
      color: $blue
      cursor: pointer

      &:hover
        background-color: $blue
        color: white

    &--small
      width: 60px
      height: 60px
      padding: 0

      .icon
        width: 55px
        height: 55px
        background-image: url("/img/kms/icons/icon_plus.svg")
        margin-bottom: 0

      p, .select, .or
        display: none

    &.is-hidden
      display: none