// Gallery

.gallery-container
  margin: -8px

  .gallery
    .item
      input[type="radio"], input[type="checkbox"]
        display: none

.gallery-select-container
  display: flex
  width: 100%

  .gallery-select
    flex: 1
    max-height: 100%
    overflow: scroll

  .gallery-select-sidebar
    border-left: 1px solid #ddd
    box-shadow: 0 0 15px rgba(0, 0, 0, .15)
    margin: -20px -20px -20px 0
    padding: 20px
    width: 300px

.gallery-select-sidebar form
  display: flex
  flex-direction: column
  height: 100%
  justify-content: space-between

.gallery-select-action-bar
  align-items: center
  display: flex

  .button
    margin-bottom: 0

  button
    margin-right: 0

.gallery
  margin: 20px 0

  .item
    border-radius: 5px
    float: left
    height: 150px
    line-height: 100px
    margin: 8px
    overflow: hidden
    position: relative
    transition: transform .3s ease
    width: 150px
    z-index: 3

    .title
      color: #fff
      font-size: 12px
      font-weight: bold
      margin: 5px
      position: absolute
      text-shadow: 0 1px 0 rgba(0, 0, 0, .25)
      text-transform: uppercase
      z-index: 2

    img
      position: relative
      width: 100%
      z-index: 1
      transition: all .2s ease

    .overlay
      height: 100%
      position: absolute
      text-align: center
      transition: all .2s ease
      width: 100%
      z-index: 2

      input
        display: none

      a
        bottom: 0px
        color: #fff
        display: inline-block
        font-size: 11px
        font-weight: bold
        letter-spacing: 2px
        line-height: 26px
        text-transform: uppercase
        transition: all .2s ease
        transform: translateY(100%)
        padding: 0 12px
        position: absolute
        z-index: 3

      a.edit-photo-link
        left: 0px

      a.delete-photo-link
        right: 0px

      .photo-name
        top: 0
        color: #fff
        display: block
        font-size: 12px
        font-weight: bold
        left: 0
        line-height: 15px
        text-align: left
        transition: all 0.2s ease
        opacity: 0
        padding: 10px
        position: absolute
        word-break: break-word
        z-index: 3

    &.ui-draggable:not(.ui-draggable-disabled):hover
      cursor: move

    &.ui-draggable-disabled:hover, &:not(.ui-draggable):hover
      .overlay
        background: rgba(0, 0, 0, 0.5)

        a
          opacity: 1
          transform: translateY(0%)

        .photo-name
          opacity: 1

    &.dropping:not(.media-folder)
      transform: scale(0.8)

    &.dropped:not(.media-folder)
      transform: scale(0)

    form
      height: 100%

.gallery-select .item .overlay a
  display: none

.gallery:after
  clear: both
  content: ""
  display: block

.gallery-select
  margin: 0

  &.gallery-select-multiple
    padding-bottom: 70px

  form
    margin: 0

  .item
    border-radius: 5px
    cursor: pointer
    display: inline
    height: 150px
    line-height: 150px
    margin: 8px
    position: relative
    transition: all .3s ease
    width: 150px

    input
      display: none

    img
      display: block

  .item:not(.item-uploader):hover
    box-shadow: 0 0 20px rgba(0, 0, 0, .4)

  .item.selected:before
    background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))
    content: " "
    height: 100%
    position: absolute
    top: 0px
    width: 100%
    z-index: 2

  .item.selected:after
    color: #95e995
    font-size: 36px
    position: absolute
    text-align: center
    text-shadow: 0 2px 20px rgba(0, 0, 0, .75)
    top: 0
    width: 100%
    z-index: 3
    @extend .icon
    content: "\f120"

  .item.attachment
    height: 60px
    line-height: 60px
    font-size: 13px
    padding: 0 20px 0 20px
    width: auto

    &:before
      content: "S"
      font-family: $icon-font
      font-size: 28px
      margin-right: 10px
      vertical-align: middle

    &.selected
      background: $primary-color
      color: #fff
      opacity: .7

  .gallery-select-action-bar
    align-items: center
    background: #fff
    border-top: 1px solid #e5e5e5
    display: flex
    justify-content: flex-end
    margin-top: 12px
    padding: 12px 12px 0

    .button
      margin: 0 0 0 4px

// Customfile

.gallery .item
  .customfile
    background: white
    border: 1px solid #e5e5e5
    border-radius: 6px
    cursor: pointer
    height: 100%
    overflow: hidden
    position: relative
    text-align: center
    width: 100%

    &:before
      color: #bbb
      display: block
      font-weight: normal
      line-height: 130px
      transition: color .2s ease
      vertical-align: middle
      @extend .icon, .icon-upload-outline
      font-size: 42px

    &:after
      animation: "rotate" 2s linear infinite
      color: #bbb
      display: block
      font-weight: normal
      line-height: 130px
      vertical-align: middle
      @extend .icon
      display: none
      font-size: 42px
      content: "\f131"

  .customfile.loading
    &:before
      display: none

    &:after
      display: block

  &:hover .customfile:before
    color: #333

  &:hover .new_photo label, &:hover .new_image label
    color: #333

  .customfile-feedback
    display: none

  .customfile-input
    background: transparent
    border: 0
    cursor: pointer !important
    display: block
    height: 100%
    left: -100% !important
    opacity: 0
    position: absolute
    top: 0 !important
    width: 200%
    z-index: 9

  .customfile-button
    display: none

  .new_photo label, .new_image label
    color: #999
    font-size: 13px
    font-weight: 600
    line-height: 130px
    padding-top: 32px
    position: absolute
    text-align: center
    text-transform: lowercase
    transition: color .2s ease
    width: 100%
    z-index: 1

// Media folders

.media-folder
  align-items: center
  background: #e5e5f0
  border: 1px solid #d5d4e6
  display: flex
  flex-direction: column
  justify-content: center
  line-height: 20px

  &:hover, &.dropping
    .media-folder-thumbnail
      transform: rotate(-4deg)
    .media-folder-thumbnail:after
      transform: translateY(-10px) translateX(30px)
    .media-folder-shadow:before
      transform: rotate(12deg)
    .media-folder-shadow:after
      transform: rotate(6deg)

.media-folder-thumbnail
  height: 70px
  position: relative
  transform-origin: center bottom
  transition: transform .4s ease
  width: 70px

  .media-folder-placeholder
    align-items: center
    background: $primary-color-light
    border-radius: 5px
    color: rgba(255, 255, 255, .5)
    display: flex
    font-size: 28px
    height: 100%
    justify-content: center
    position: relative
    width: 100%
    z-index: 1

  &[data-badge]:after
    background: #6b699f
    border: 3px solid #e5e5f0
    border-radius: 12px
    color: #fff
    content: attr(data-badge)
    display: block
    font-size: 10px
    font-weight: bold
    height: 24px
    line-height: 18px
    position: absolute
    right: -8px
    text-align: center
    transition: transform .4s ease
    top: -8px
    width: 24px
    z-index: 1

  .media-folder-shadow:before, .media-folder-shadow:after
    background: rgba(107, 105, 159, .25)
    border-radius: 5px
    content: " "
    display: block
    height: 70px
    left: 0px
    position: absolute
    transform-origin: center bottom
    transition: transform .4s ease
    top: 0px
    width: 70px
    z-index: 0

  .media-folder-shadow:after
    background: rgba(107, 105, 159, .5)

  img
    border-radius: 5px
    position: relative
    width: 100%
    z-index: 1

.media-folder-name
  color: #4d4f81
  font-size: 14px
  font-weight: 600
  height: 16px
  line-height: 16px
  margin-top: 6px
  text-align: center