// =============================================================================
// DRAWER — LODGE CONTENT
// Content plugged into the reusable .drawer shell (see _drawer.scss) for the
// lodge detail: 3-image slider. Markup lives in sflg_accommodation's
// DrawerLodge.html: .drawer-slider.swiper > .swiper-wrapper + .drawer-slider__nav
// — the nav sits INSIDE the slider, right after the swiper track, not
// alongside it as a sibling in .drawer__body — so its spacing from the
// images is this file's own .drawer-slider__nav margin-top, below.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "drawer-component"
// =============================================================================

@import '../mixins';

// ── Image slider ────────────────────────────────────────────────────────────
.drawer-slider {
  width: 100%;
  overflow: hidden;

  .swiper-slide {
    height: 216px;                       // mobile: 216px

    @include respond-to('desktop') {
      height: 309px;                     // desktop: 309px
    }
  }
}

.drawer-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drawer-slider__nav {
  display: flex;
  gap: 5px;                              // ~4.8px Figma gap
  margin-top: 16px;                      // breathing room below the slider images
}

.drawer-slider__nav-btn {
  @include slider-nav-btn;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-satin-linen);
  color: var(--color-mantle);

  img {
    width: 14px;
    height: 14px;
    display: block;
  }
}

.drawer-slider__nav-btn--prev {
  opacity: 0.35;
}

.drawer-slider__nav-btn--next {
  opacity: 1;
}