/**
 * Global Swiper navigation buttons.
 * Same look for all sliders; position is controlled by parent (e.g. .addons__nav, .yacht-gallery__nav).
 */

.swiper-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.swiper-nav-btn path {
  fill: #fff;
}

.swiper-nav-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.swiper-nav-btn:active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 0.8;
}

.swiper-nav-btn.swiper-button-disabled {
  background-color: var(--color-on-primary);
}

.swiper-nav-btn.swiper-button-disabled path {
  fill: var(--color-primary);
}
.swiper-nav-btn svg {
  width: 19px;
  height: 14px;
}
@media (max-width: 768px) {
  .swiper-nav-btn {
    width: 40px;
    height: 40px;
  }
}