/* Basic Block Slider */

.basic-block-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 520px;
  overflow: hidden;
}

.basic-block-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.basic-block-slider-track::-webkit-scrollbar {
  display: none;
}

.basic-block-slider-track.dragging {
  scroll-snap-type: none;
}

.basic-block-slider-track > * {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Media */

.basic-block-slider img,
.basic-block-slider video,
.basic-block-slider iframe {
  display: block;
  max-width: 100%;
}

.basic-block-slider img,
.basic-block-slider video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.basic-block-slider .wp-block-video {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

/* Dots */

.basic-block-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  transform: translateX(-50%);
}

.basic-block-slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 999;
	transition: ease-in-out;
}

.basic-block-slider-dot.active {
  width: 24px;
  background: rgba(0, 0, 0, 0.9);
}

.basic-block-slider-dot:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Editor */

.editor-styles-wrapper .basic-block-slider {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.editor-styles-wrapper .basic-block-slider-track {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.editor-styles-wrapper .basic-block-slider-track > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  flex: none !important;
  margin-bottom: 1.5rem !important;
}