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

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

.inoby-slider-gallery {
  background-color: $col-sec;
  padding: $space-lg 0 calc(#{$space-lg} * 1.5);
  .row-head {
    margin-bottom: $space-md;
    .col-12 {
      text-align: center;
      @include bp("md") {
        text-align: left;
      }
    }
    h2 {
      color: $white;
    }
  }
  // used in ./slider-gallery.ts
  --slider-spacing: #{$component-gallery-slider-spacing};
  .gallery {
    .gallery-slide {
      height: 300px;
      img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        border-radius: $border-radius;
      }
    }
    &.has-arrows {
      .keen-arrow {
        $arrow-size: 28px;
        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;
  }
}
