:host {
  display: block;
}

.slider-block {
  display: grid;
  gap: 12px;
}

.slider-track-wrapper {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--slider-gap, 12px);
  padding-inline: var(--slider-side-padding, 10%);
}

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

.slider-slide {
  flex: 0 0 var(--slider-item-width, 80%);
  scroll-snap-align: center;
  overflow: hidden;
  aspect-ratio: var(--slider-ratio, 3 / 2);
  background: var(--owb-section-child-background-color, #f3f4f6);
}

.slider-slide.is-auto-ratio {
  aspect-ratio: auto;
  flex: 0 0 auto;
  height: var(--slider-height, 400px);
  width: auto;
}

.slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-slide.is-auto-ratio img {
  height: 100%;
  width: auto;
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.slider-nav-btn {
  border: 0;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--owb-section-child-background-color, #f3f4f6);
  color: var(--owb-section-child-text-color, #111827);
  cursor: pointer;
  flex-shrink: 0;
}

.slider-nav-btn:hover {
  opacity: 0.75;
}

.slider-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--editor-border-color, #d1d5db);
  border-radius: 6px;
  padding: 14px;
  color: var(--owb-section-child-text-color, #6b7280);
}

.slider-textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-family: inherit;
  background: var(--owb-section-child-background-color, #fff);
  color: var(--owb-section-child-text-color, inherit);
}