@import "@css[shared]/page/product/_product-gallery";

.gallery-col {
   position: relative;
   margin-bottom: 32px;
}

.product-gallery {
   position: relative;
   margin-right: 40px;
   margin-bottom: 0;
}

.product-flags {
   position: absolute;
   right: 70px;
   top: 18px;
}

.product-gallery-bottom {
   margin-top: 50px;
}

.product-photo-main {
   border-radius: $border-radius-base;
   background-color: $body-bg-alt;
   padding: 24px;
   margin-bottom: 0;
   max-width: 100%;
   overflow: hidden;

   img {
      mix-blend-mode: darken;
   }

   .product-gallery-resp {
      display: none;
   }

   > a:not(:first-child) {
      display: none;
   }
}

.link-360 {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   left: 30px;
   bottom: 20px;
   font-size: 40px;
   background-color: $white;
   color: $black;
   border-radius: 50%;
   transition: all $transition-speed;

   .fc {
      position: relative;
      top: 2px;
   }

   @include haf {
      background-color: $black;
      color: $white;
   }
}

@media screen and (max-width: $xl - 1) {
   .product-gallery {
      margin-right: 20px;
   }
   .product-flags {
      right: 45px;
   }
}

@media screen and (max-width: $lg - 1) {
   .product-gallery-bottom {
      display: none;
   }

   .product-flags {
      right: 30px;
   }

   .product-gallery {
      margin-right: 0;
   }

   .product-photo-main {
      display: flex;
      overflow: auto hidden;
      scroll-snap-type: x mandatory;
      padding: 0;

      &::-webkit-scrollbar {
         height: 0;
      }

      > a {
         width: 100%;
         min-width: 100%;
         background-color: $body-bg-alt;
         display: flex;
         align-items: center;
         justify-content: center;
         scroll-snap-align: start;
         padding: 24px;

         &:not(:first-child) {
            display: flex;
         }
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .product-gallery {
      margin: 0 -10px;
      border-top: 1px solid $border-color;
   }

   .product-flags {
      right: 18px;
   }

   .product-photo-main {
      border-radius: 0;
   }
}
