.swiper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.swiper-button-next,
.swiper-button-prev {
  &:before {
    content: "";
    display: block;
    position: absolute;
    width: var(--size-icon-circle);
    height: var(--size-icon-circle);
    background-size: 100%;
  }
}

.swiper-button-next {
  right: 0;

  &:before {
    background-image: url("/assets/icons/circle-arrow-right.svg");
    right: var(--spacing-sitepadding-inline);
  }

  &:after {
    content: "Neste";
    visibility: hidden;
  }
}

.swiper-button-prev {
  left: 0;

  &:before {
    background-image: url("/assets/icons/circle-arrow-left.svg");
    left: var(--spacing-sitepadding-inline);
  }

  &:after {
    content: "Forrige";
    visibility: hidden;
  }
}

.swiper-pagination {
  display: inline-block;
  width: auto;
  margin: var(--spacing-s) var(--spacing-sitepadding-inline);
  padding: 0 var(--spacing-xs);
  border-radius: 2rem;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  font-size: var(--font-size-caption);
}

@media (max-width: 800px) {

  .swiper-button-next:before {
    right: 10px;
  }

  .swiper-button-prev:before {
    left: 10px;
  }
}