:root {
  --swiper-button-size: 60px;
  --swiper-button-background-color: var(--primary-color);
  --swiper-button-color: var(--white);
  --swiper-button-background-color-hover: var(--secondary-color);
  --swiper-button-color-hover: var(--primary-color);
}

.swiper-button {
  width: var(--swiper-button-size);
  height: var(--swiper-button-size);
  flex: 0 0 var(--swiper-button-size);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--swiper-button-background-color);
  color: var(--swiper-button-color);
  cursor: pointer;
  transition: var(--transition);
}
.swiper-button:hover, .swiper-button:focus-visible {
  --swiper-button-background-color: var(--swiper-button-background-color-hover);
  --swiper-button-color: var(--swiper-button-color-hover);
}

.swiper-button-prev [class*=icon-] {
  transform: scaleX(-1);
}