.swiper {
  --swiper-theme-color: var(--color-black);
}
.swiper--hide-controls,
[data-image-slider="false"] {
  .swiper-navigation-controls,
  .swiper-nav {
    display: none;
  }
}

.swiper-navigation-controls {
  --swiper-bullet-size: var(--size-5);
  --swiper-bullet-color: var(--background-black);
  --swiper-bullet-inactive-color: transparent;
  --swiper-bullet-border: var(--border-neutral);

  --swiper-pagination-gap: var(--size-2-5);

  --swiper-navigation-color: var(--border-neutral);
  --swiper-navigation-size: 28px;

  --swiper-navigation-top: var(--size-6);

  &.positive {
    --swiper-bullet-color: var(--background-dark);
    --swiper-bullet-border: var(--background-dark);
    --swiper-navigation-color: var(--background-dark);
  }

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--swiper-pagination-gap);
  margin-top: var(--swiper-navigation-top);
  /* Focus border reserved space */
  padding-bottom: 5px;
}

.swiper-nav {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.swiper-button-prev:hover {
  transform: translateX(-4px);
}

.swiper-button-next:hover {
  transform: translateX(4px);
}

.swiper-button-lock,
.swiper-pagination-lock {
  display: none !important;
}

.swiper-nav svg {
  height: var(--swiper-navigation-size);
  width: var(--swiper-navigation-size);
  color: var(--swiper-navigation-color);
}

.swiper-pagination {
  display: flex;
  gap: var(--swiper-pagination-gap);
}

.swiper-pagination-bullet {
  background-color: var(--swiper-bullet-inavtive-color);
  border: var(--border-xs) solid var(--swiper-bullet-border);
  border-radius: 50%;
  width: var(--swiper-bullet-size);
  height: var(--swiper-bullet-size);

  &.swiper-pagination-bullet-active {
    background-color: var(--swiper-bullet-color);
  }
}

.swiper-slide {
  height: auto;

  picture {
    height: 100%;
    width: 100%;
    display: flex;

    img {
      object-fit: cover;
    }
  }

  video {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  figure.image {
    overflow: hidden;
  }
}

.swiper-slide:focus-within {
  outline: none;
}