/**
 * Gallerya layout and styling.
 *
 * 1. Take the available width, subtract the necessary gaps between thumbnails
 *    and divide the remaining space evenly among thumbnails.
 * 2. Plugin image-disclaimer adds content that could cover the video player
 *    controls.
 */

$screen-xs-min: 480px;
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

$color-light: #fff;
$color-dark: #000;
$color-primary: #e0e2e3;
$color-secondary: #c4c4c4;

.gallerya {

  &--slider,
  &--product-variation-slider,
  &--grid {
    width: 100%;

    > ul {
      &:after {
        // Prevent this from being overriden by clearfixes through using !important.
        content: 'flickity' !important;
        display: none !important;
      }
    }
  }

  &--product-variation-slider,
  &--slider {

    @media screen and (min-width: $screen-sm-min) {
      margin-right: auto;
      margin-left: auto;
    }

    clear: both;

    > ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        width: 100%;
      }
    }


    .gallerya__image,
    .gallerya__image img {
      @media screen and (min-width: $screen-sm-min) {
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  &--slider {
    margin-top: 20px;
    margin-bottom: 40px;

    @media screen and (min-width: $screen-sm-min) {
      margin-top: 50px;
      margin-bottom: 75px;
    }

    > ul {
      li {
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .gallerya__image {
      margin-bottom: 30px;

      @media screen and (min-width: $screen-sm-min) {
        width: 75%;
      }
    }

    .gallerya--slider__nav {
      .flickity-prev-next-button {
        top: 50%;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);

        &.previous {
          left: 4px;
        }

        &.next {
          right: 4px;
        }

        &[disabled] {
          opacity: 0.5;
        }
      }

      li {
        width: auto;
        padding: 0 5px;
      }

      .gallerya__image {
        width: 100%;
        margin: initial;
        display: block;
        max-height: 90px;

        img {
          display: block;
          width: auto;
          max-width: none;
          max-height: inherit;
        }
      }
    }
  }

  &--product-variation-slider {
    width: 100%;

    .flickity-prev-next-button {
      width: 28px;
      height: 28px;
      margin: 0;
      padding: 0;
      outline: none;
      background: $color-primary;

      &:hover {
        background: $color-secondary;
      }

      .arrow {
        fill: #fff;
      }
    }

    // Hide all slides but first before Flickity is initialized to prevent reflows.
    li:not(:first-of-type) {
      display: none;
    }
    .flickity-enabled {
      li:not(:first-of-type) {
        display: block;
      }
    }

    .flickity {
      white-space: nowrap;
      overflow: visible;

      li {
        display: inline-block;
      }

      &-prev-next-button {
        @media screen and (min-width: $screen-sm-min) {
          &.previous {
            left: 10px;
          }

          &.next {
            right: 10px;
          }
        }
      }
    }
  }

  &--grid {
    @extend .gallerya--slider;

    > ul {
      li {
        top: auto;
        transform: none;
      }
    }

    @media screen and (min-width: $screen-sm-min) {
      ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-left: -20px;

        &:after {
          content: '';
        }

        li {
          list-style: inherit;
          flex-basis: calc(100%/2 - 20px);
          margin-left: 20px;
          transform: none;
        }
      }

      .gallerya__image {
        margin: 0;
        margin-bottom: 20px;
        overflow: hidden;
        width: auto;

        figcaption {
          transform: translateY(100%);
          transition: all .2s ease-out;
        }

        &:hover {
          figcaption {
            transform: translateY(0);
          }
        }
      }
    }
  }

  &__image {
    position: relative;

    a {
      display: block;
      text-align: center;
    }

    img {
      width: auto;
      max-height: 645px;
      vertical-align: middle;
    }

    figcaption {
      width: 100%;
      display: block;
      padding: 15px;
      color: $color-secondary;
      font-size: 14px;
      line-height: 1.4;
      background: $color-light;

      @media screen and (min-width: $screen-sm-min) {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10% 15px 15px;
        background: linear-gradient(to top, $color-dark 0%, transparent 100%);
        color: $color-primary;
      }
    }
  }

  &__image-group {
    display: flex;
    flex-wrap: wrap;
    transform: translateX(-5px);
    @media screen and (min-width: $screen-sm-min) {
      width: 75%;
      margin-left: auto;
      margin-right: auto;
    }

    .gallerya__image {
      margin: 0;
      width: auto;
      flex: 1 0 30%;
      margin-bottom: 5px;
      padding-left: 5px;
      max-width: calc(100% / 2);
      @media screen and (min-width: $screen-sm-min) {
        max-width: calc(100% / 3);
      }
    }
  }

  .flickity-prev-next-button {
    top: auto;
    width: 28px;
    height: 28px;

    @media screen and (min-width: $screen-sm-min) {
      top: 50%;
    }
  }

  .flickity-page-dots,
  .flickity-prev-next-button {
    margin: 0;
    padding: 0;
    outline: none;
  }

  .flickity-page-dots .dot,
  .flickity-prev-next-button {
    background: $color-primary;

    &:hover {
      background: $color-secondary;
    }
  }

  &__count {
    font-size: 0.875em;
    text-align: center;
  }
}

.lg-outer .lg-item {
  //background-image: url("../images/loading.gif");
}

.is-currently-selected {
  .gallerya__image {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 2px solid $color-primary;
    }
  }
}

// Single Product Gallery Bullet Nav
.flex-control-paging {
  display: block;
  position: relative;
  width: 100%;
  height: 19px;
  margin: 16px 0 0px;
  padding: 0;
  list-style: none;
  text-align: center;

  li {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    padding: .25rem;
    line-height: 0;
    vertical-align: top;

    a {
      position: relative;
      display: inline-block;
      height: 11px !important;
      width: 11px !important;
      margin: 0;
      padding: 0;
      border-radius: 50%;
      border: 2px solid $color-secondary;
      background: 0 0;
      background-color: transparent;
      outline: 0;
      line-height: 0;
      vertical-align: top;
      font-size: 0;
      text-indent: -99999px;
      color: transparent;
      cursor: pointer;

      &:focus,
      &:hover {
        outline: 0;

        &:before {
          opacity: .5;
        }
      }

      &:hover {
        &:before {
          background-color: $color-secondary !important;
        }
        &:after {
          content: "";
          display: none !important;
        }
      }

      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 11px;
        height: 11px;
        top: -2px;
        left: -2px;
        border-radius: 50%;
        color: $color-secondary;
        transition: background .1s ease-out;
      }

      &.flex-active {
        background-color: $color-secondary;
      }
    }
  }
}

// Fancybox thumbnails stripe styling.
.fancybox-thumbs {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: auto;
  height: 95px;
  padding: 10px 10px 5px 10px;
  background: rgba(0, 0, 0, 0.3);
}

.fancybox-show-thumbs .fancybox-inner {
  right: 0;
  bottom: 95px;
}

.fancybox-thumbs__list {
  margin: 0 auto;
}

// Flickity WooCommerce Compatibility
.woocommerce {
  .product {
    .flex-control-thumbs {
      --thumbnail-count: 6;
      --thumbnail-spacing-unit: 9px;
      --thumbnail-slider-margin: 12px;
      display: flex;
      flex-wrap: wrap;

      .slider-thumb-video {
        position: relative;

        img {
          width: 100%;
          min-width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .slider-thumb-video:before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="100%25" version="1.1" viewBox="0 0 68 48" width="100%25"%3E%3Cpath class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="%23212121" fill-opacity="0.8"%3E%3C/path%3E%3Cpath d="M 45,24 27,14 27,34" fill="%23fff"%3E%3C/path%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: center center;
        pointer-events: none;
      }

      &.flickity {
        display: block;
        overflow: visible !important;
        margin-right: var(--thumbnail-slider-margin) !important;
        margin-left: var(--thumbnail-slider-margin) !important;
        white-space: nowrap;

        li {
          float: none !important;
          display: inline-block;
          width: calc((100% - (var(--thumbnail-spacing-unit) * (var(--thumbnail-count) - 1))) / var(--thumbnail-count)) !important; // [1]
          margin-right: var(--thumbnail-spacing-unit) !important;
          margin-bottom: 0;
        }

        img {
          border: 1px solid transparent;
          opacity: 0.7;

          &:hover,
          &.flex-active {
            border: 1px solid rgba(0, 0, 0, 0.5);
            opacity: 1;
          }
        }

        &:after {
          display: table;
          content: ' ';
          clear: both;
        }

        .flickity-slider {
          display: flex;
          align-items: center;
        }
      }

      .flickity-prev-next-button {
        width: 24px;
        height: 24px;
        padding: 0;
        background: #575757;
        color: #ffffff;

        .arrow {
          fill: currentColor;
        }

        &:hover {
          background: $color-dark;
          color: #ffffff;
        }

        &.previous {
          left: -12px;
        }

        &.next {
          right: -12px;
        }
      }
    }
  }
}

// Video in Single Product Gallery
.woocommerce-product-gallery {
  &--with-images {
    .gallerya {
      &__featured-content {
        position: relative;
      }

      &__video-content {
        padding-bottom: 100%;

        iframe {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 56.25%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .woocommerce-product-gallery__image.has-video {
    background: #000;

    &:after {
      display: none; // [2]
    }
  }
}

.gallerya-hidden {
  visibility: hidden;
}