_attachment.sass

.pp-attachment-drop-button
  align-items: center
  background: transparent
  border: 0
  display: flex

  .pp-link
    color: $pipefy
    font: $font_size_default $fonts

  .pp-bg-ico
    align-items: center
    background: rgba($pipefy, .1)
    border-radius: 3px
    display: inline-flex
    height: 40px
    justify-content: center
    margin-right: 10px
    position: relative
    width: 40px

    &:before
      color: $pipefy
      content: '\e936'
      font-family: 'pipeicons'
      font-size: 22px

  &.pp-active,
  &:focus,
  &:hover
    .pp-link
      color: $pp_scale_4
      text-decoration: underline

    .pp-bg-ico
      background: $pipefy

      &:before
        color: #fff
        content: '\e917'

.pp-attachment-box
  .pp-header-box
    h2
      span:before
        color: $purple

  .pp-area-actions
    .pp-group-actions
      span
        color: $gray_scale_4
        font: $font-size-default $fonts
        margin-right: 0
        padding-left: 0
        text-transform: capitalize

.pp-attachment-alternative
  margin-top: 10px

.pp-attachment-list

  .dz-complete
    .pp-progress-bar
      display: none

  .pp-attachment-item
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 10px

    .pp-attachment-thumbnail
      width: 42px
      height: 42px
      background-size: cover
      background-position: center
      border-radius: 3px
      margin-right: 20px

    .pp-attachment-file
      width: calc(100% - 60px)
      margin: 0

    .pp-attachment-actions
      display: flex
      justify-content: space-between
      width: 60px

      .pp-ico-close
        top: 0!important

      [class*="pp-ico"]:before
        font-size: 24px !important

    [class*="pp-ico"]
      display: none

    &:last-child
      margin-bottom: 0

    &:hover

      [class*="pp-ico"]
        display: block

        &:before
          color: $gray_scale_4
          font-size: 22px

        &:hover:before
          color: $pipefy

  a
    align-items: center
    display: flex
    margin-bottom: 10px
    position: relative

    [class*="pp-ico"]
      display: none

    &:last-child
      margin-bottom: 0

    div,
    p
      font-family: $fonts
      width: 100%

      .pp-color-danger
        margin-top: 5px

      .pp-progress-bar
        background: $gray_scale_3
        border-radius: 3px
        display: block
        height: 6px
        position: relative
        width: 100%

        span
          background: $pipefy
          border-radius: 3px
          display: inline-block
          height: 6px
          left: 0
          position: absolute
          top: 0

    &:hover

      [class*="pp-ico"]
        display: block

        &:before
          color: $gray_scale_4
          font-size: 22px

        &:hover:before
          color: $pipefy

      .pp-attachment-ico
        position: relative

        &:before
          background: rgba(0, 0, 0, .9)
          border-radius: 3px
          content: ""
          height: 42px
          left: 0
          position: absolute
          top: 0
          width: 42px
          z-index: 1

        &:after
          color: #fff
          content: '\e930'
          font: 28px 'pipeicons'
          left: 7px
          position: absolute
          top: 6px
          z-index: 2

      p
        color: $pipefy

    img
      border-radius: 3px
      height: 42px
      margin-right: 20px
      min-width: 42px
      width: 42px


.pp-dropzone-wrapper
  position: relative

  .pp-dropzone-dropplaceholder
    background: rgba($pipefy, .9)
    border-radius: 3px
    bottom: 0
    display: none
    left: 0
    position: absolute
    right: 0
    top: 0
    z-index: 5

    .pp-dropzone-dropplaceholder-content
      align-items: center
      color: white
      display: flex

      .pp-ico-download:before
        color: #fff
        font-size: 42px

  .dz-hover
    .pp-dropzone-dropplaceholder
      @include always_center


.pp-attachment-gallery
  position: fixed
  @include always_center
  bottom: 0
  height: 100vh
  left: 0
  right: 0
  top: 0
  width: 100vw
  z-index: 30

  .pp-frame-loading
    background: #fff

    iframe
      opacity: 0

  .pp-modals-close
    z-index: 15
    background: transparent
    border: 0
    border-radius: 6px
    color: #fff
    cursor: pointer
    font-size: 26px
    padding: 9px 15px
    position: absolute
    right: 10px
    top: 10px
    z-index: 15

    &:hover
      background: $dark_cachoal

    &:focus
      box-shadow: unset

  &-content
    position: absolute
    z-index: 10
    @include always_center
    width: 100%
    padding: 0 50px

    .pp-btn:not(a)
      background: transparent
      padding: 10px
      position: absolute

      &:focus,
      &:hover
        background: $dark_cachoal

      span
        margin-right: 0

        &:before
          font-size: 40px

      &:first-of-type
        left: 0

      &:last-of-type
        right: 0

    &-preview
      margin: 0 50px
      padding: 50px 0
      text-align: center

      img
        max-width: 90%

      .pp-ico-loading
        position: absolute
        top: 50%
        left: 50%
        font-size: 30px
        width: 30px
        margin-left: -20px
        margin-top: -20px
        color: $pipefy

      iframe
        height: calc(100vh - 150px)
        width: calc(100vw - 150px)
        background: $gray_scale_3
        border: 0

    &-footer
      align-items: center
      display: flex
      justify-content: space-between
      padding: 20px 0

      p
        color: #fff
        font: $font-size-big $fonts
        max-width: calc(100vw - 360px)
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        padding-right: 20px

@media screen and (max-width: 768px)

  .pp-attachment-list
    .pp-attachment-item
      [class*="pp-ico"]
        display: block