/* 
  Main file for implementing custom design     
*/

#main-container {
  .swiper-button-prev::after,
  .swiper-button-next::after{
    content: "";
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;

    @media (max-width: 900px) {
      /* width: 3rem;
      height: 3rem; */
    }

    &.swiper-button-disabled {
      display: none;
    } 
  }

  .swiper-button-prev::before,
  .swiper-button-next::before {
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    background: currentColor; 
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    color: var(--wp--preset--color--palette-color-2);
    background-color: var(--wp--preset--color--palette-color-8);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20S31.046 0 20 0Zm8.65 19.999V20.017a.65.65 0 0 1-.055.246c-.002.002-.001.002-.001.003h-.001v.002a.662.662 0 0 1-.128.187l-.002.001-6.857 7a.646.646 0 0 1-.919.008.65.65 0 0 1-.009-.92l5.775-5.894H12a.65.65 0 0 1 0-1.3h14.453l-5.775-5.895a.65.65 0 0 1 .928-.91l6.857 6.999.002.001c.055.056.097.12.128.187v.002l.002.002.007.016a.65.65 0 0 1 .047.231l.001.014v.002Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20S31.046 0 20 0Zm8.65 19.999V20.017a.65.65 0 0 1-.055.246c-.002.002-.001.002-.001.003h-.001v.002a.662.662 0 0 1-.128.187l-.002.001-6.857 7a.646.646 0 0 1-.919.008.65.65 0 0 1-.009-.92l5.775-5.894H12a.65.65 0 0 1 0-1.3h14.453l-5.775-5.895a.65.65 0 0 1 .928-.91l6.857 6.999.002.001c.055.056.097.12.128.187v.002l.002.002.007.016a.65.65 0 0 1 .047.231l.001.014v.002Z'/%3E%3C/svg%3E");
  }

  /* prev = zelfde icoon maar gespiegeld */
  .swiper-button-prev::before {
    transform: scaleX(-1);
  }

  /* hover */
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    background-color: var(--wp--preset--color--palette-color-8);

    &::before {
      background-color: var(--wp--preset--color--palette-color-1);
    }
  }
}