// Gallery

.gallery-container
  margin: -8px

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

.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
      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
        transform: translateY(-100%)
        padding: 10px
        position: absolute
        word-break: break-word
        z-index: 3

    &:hover
      .overlay
        background: rgba(0, 0, 0, 0.5)

        a
          opacity: 1
          transform: translateY(0%)

        .photo-name
          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
    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, .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
      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, .icon-refresh:before
      display: none
      font-size: 42px

  .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
    transition: color .2s ease
    width: 100%