:root {
  --swiper-navigation-top-offset: calc(100% + 50px);
  --swiper-navigation-sides-offset: 0;
  --swiper-pagination-color: var(--wp--preset--color--contrast-2);
  --swiper-pagination-left: 0px;
  --swiper-pagination-top: calc(100% + 50px);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-horizontal-gap: 2.5px;
}

.swiper-container {
  overflow: hidden;
}

#wdse-carousel {
  .swiper-button-prev,
  .swiper-button-next {
    width: 60px;
    height: 60px;
    border: 1px solid var(--wp--preset--color--accent-2);
    &:hover {
      border-color: var(--wp--preset--color--accent-2);
    }
  }

  /* Nav: Prev */
  .swiper-button-prev {
    left: calc(100% - 136px);
    top: calc(0% - 120px);
  }
  .swiper-button-next {
    top: calc(0% - 120px);
  }
  .swiper-button-prev::after {
    /* content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23BF6430" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-128 128z"/></svg>'); */
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.7 42.7"><path d="M10.4 20.3h26v2.2h-26L22.9 35l-1.5 1.5L6.3 21.4 21.4 6.3l1.5 1.5z" style="fill:%23BF6430"/></svg>');
    width: 40px;
    height: 40px;
    line-height: 0;
  }
  .swiper-button-prev.swiper-button-disabled::after {
    opacity: 0.9;
  }
  /* Nav: Next */
  .swiper-button-next::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.7 42.7"><path d="M32.3 22.4H6.2v-2.2h26L19.7 7.7l1.5-1.5 15.1 15.1-15.1 15.1-1.5-1.5 12.5-12.5Z" style="fill:%23BF6430"/></svg>');
    width: 40px;
    height: 40px;
    line-height: 0;
  }
  .swiper-button-next.swiper-button-disabled::after {
    opacity: 0.9;
  }

  /* Pagination */
  .swiper-pagination-bullets {
    display: flex;
    justify-content: start;
  }

  @media (max-width: 1024px) {
    .swiper-button-prev,
    .swiper-button-next {
      width: 36px;
      height: 36px;
      &::after {
        width: 24px;
        height: 24px;
      }
    }
    .swiper-button-prev {
      left: calc(100% - 87px);
      top: calc(0% - 120px);
    }
  }
}