@import "variables";
@import "mixins";

$thumbs_spacing: 1rem !default;

.woocommerce-product-gallery {
  .slider {
    display: none !important;
  }
  .gallery {
    display: block;
    .thumbs {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(5, 1fr);
      margin-top: $thumbs_spacing;
      gap: $thumbs_spacing;
      .woocommerce-product-gallery__image {
        width: unset !important;
        img {
          object-fit: cover;
          height: 100% !important;
          width: 100% !important;
        }
        &.more {
          position: relative;
          cursor: pointer;
          &::after {
            position: absolute;
            left: 0;
            top: 0;
            content: attr(data-more-text);
            width: 100%;
            height: 100%;
            background: rgba($color: $black, $alpha: 0.5);
            color: $white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            line-height: 0;
            transition: background $trans ease;
          }
          &:hover::after {
            background: rgba($color: $black, $alpha: 0.7);
          }
        }
      }
    }
  }
  @include bp("md") {
    .slider {
      display: flex !important;
      .woocommerce-product-gallery__image {
        img {
          width: 100%;
        }
      }
    }

    .gallery {
      display: none;
    }
  }
}
