// Gallery

.gallery-container
  margin: -8px

.gallery
  margin: 20px 0

  .item
    border-radius: 5px
    float: left
    height: 150px
    line-height: 100px
    margin: 8px
    overflow: hidden
    position: relative
    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
      @include transition(all .2s ease)

    .overlay
      height: 100%
      position: absolute
      text-align: center
      width: 100%
      z-index: 2
      @include linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .75))
      background-size: 200%
      @include transition(all .2s ease)

      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
        padding: 0 12px
        position: absolute
        z-index: 3
        @include transition(all .2s ease)
        @include transform(translateY(100%))
      
      a.edit-photo-link
        left: 0px

      a.delete-photo-link
        right: 0px

    &:hover
      .overlay
        background-size: 100%

        a
          opacity: 1
          @include transform(translateY(0%))

    form
      height: 100%

.gallery form .item .overlay a
  display: none

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

.gallery-select
  margin: -8px

  &.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
    width: 150px
    @include transition(all .3s ease)

    input
      display: none

    img
      display: block

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

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

  .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, .icon-large-check:before

  .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
    background: #fff
    border-top: 1px solid #e5e5e5
    bottom: 0px
    clear: both
    margin: 0 -12px
    padding: 12px
    position: absolute
    width: 100%
    z-index: 3

// Customfile

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

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

    &:after
      color: #bbb
      display: block
      font-weight: normal
      line-height: 130px
      vertical-align: middle
      @extend .icon, .icon-refresh:before
      display: none
      font-size: 42px
      @include animation("rotate" 2s linear infinite)

  .customfile.loading
    &:before
      display: none

    &:after
      display: block

  &:hover .customfile:before
    color: #333

  &:hover .new_photo 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
    color: #999
    font-size: 13px
    font-weight: 600
    line-height: 130px
    padding-top: 32px
    position: absolute
    text-align: center
    text-transform: lowercase
    width: 100%
    @include transition(color .2s ease)