/*
 * Justified Gallery - v3.7.0
 * http://miromannino.com/projects/justified-gallery/
 * Copyright (c) 2018 Miro Mannino
 * Licensed under the MIT license.
 */

@caption-initial-opacity: 0.0;
@caption-visible-opacity: 0.7;

.transition(@property:all, @duration: 500ms, @ease: ease-in) {
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  -o-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
}

.opacity(@opacity: 1) {
  filter: %("alpha(opacity=%d)", @opacity * 100);
  opacity: @opacity;
}

.justified-gallery {
  width: 100%;
  position: relative;
  overflow: hidden;

  > a, > div, > figure {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
    .opacity(0.1);
    margin: 0;
    padding: 0;

    > img, > a > img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0;
      padding: 0;
      border: none;
      .opacity(0);
    }

    > .caption {
      & when (@caption-initial-opacity = 0) {
        display: none;
      }
      & when (@caption-initial-opacity > 0) {
        display: initial;
        .opacity(@caption-initial-opacity);
      }
      position: absolute;
      bottom: 0;
      padding: 5px;
      background-color: #000000;
      left: 0;
      right: 0;
      margin: 0;
      color: white;
      font-size: 12px;
      font-weight: 300;
      font-family: sans-serif;
    }

    > .caption.caption-visible {
      display: initial;
      .opacity(@caption-visible-opacity);
      .transition(opacity);
    }

  }

  > .entry-visible {
    .opacity(1);
    background: none;

    > img, > a > img {
      .opacity(1);
      .transition(opacity);
    }
  }

  > .jg-filtered {
    display: none;
  }

  > .spinner {
    @spinnerDotWeight: 8px;
    @spinnerDotNum: 3;

    position: absolute;
    bottom: 0;
    margin-left: -(@spinnerDotWeight * 2) * @spinnerDotNum / 2;
    padding: 10px 0 10px 0;
    left: 50%;
    .opacity(1);
    overflow: initial;

    > span {
      display: inline-block;
      .opacity(0);
      width: @spinnerDotWeight;
      height: @spinnerDotWeight;
      margin: 0 (@spinnerDotWeight / 2) 0 (@spinnerDotWeight / 2);
      background-color: #000;
      border-radius: @spinnerDotWeight - 2px;
    }
  }

}