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

// Enter the values only in pixels!
$component-gallery-slider-spacing: 16px !default;

.inoby-slider-gallery {
  // used in ./slider-gallery.ts
  --slider-spacing: #{$component-gallery-slider-spacing};
  .gallery {
    .gallery-slide {
      height: 300px;
      img {
        object-fit: cover;
        height: 100%;
        width: 100%;
      }
    }
    &.has-thumbs {
      .gallery-slide {
        height: unset;
        img {
          height: auto;
          max-height: 720px;
        }
      }
    }
    &.has-arrows {
      .keen-arrow {
        $arrow-size: 60px;
        width: $arrow-size;
        height: $arrow-size;
        cursor: pointer;
        top: calc(50% - #{$arrow-size / 2});
      }
      .left {
        &::before {
          content: url(theme-url("/assets/icons/keen-slider-arrow-prev.svg"));
        }
        left: 25px;
      }
      .right {
        &::before {
          content: url(theme-url("/assets/icons/keen-slider-arrow-next.svg"));
        }
        right: 25px;
      }
    }
  }

  .thumbs {
    margin-top: $component-gallery-slider-spacing;
  }
}
