.swiper {
  position: relative;
}

.swiper-navigation {
  display: flex;
  gap: 0.4em;
  margin-top: 4em;
}

.swiper-navigation button {
  appearance: none;
  color: inherit;
  font-size: var(--wp--preset--font-size--medium);
  padding: 0.35em 1.2em;
  border: 1px solid;
  border-radius: 100px;
  background-color: transparent;
  transition: 0.15s;
}

.swiper-navigation button:after {
  content: '';
  display: block;
  width: 1.6em;
  height: 1.6em;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.swiper-navigation button:disabled {
  opacity: 0.5;
}

.theme-dark .swiper-navigation button:not(:disabled):hover,
.has-dark-background-color .swiper-navigation button:not(:disabled):hover,
.theme-dark .swiper-navigation button:not(:disabled):focus,
.has-dark-background-color .swiper-navigation button:not(:disabled):focus {
  background-color: var(--wp--preset--color--light);
  color: var(--wp--preset--color--dark);
  border-color: transparent;
}

.theme-light .swiper-navigation button:not(:disabled):hover,
.has-light-background-color .swiper-navigation button:not(:disabled):hover,
.theme-light .swiper-navigation button:not(:disabled):focus,
.has-light-background-color .swiper-navigation button:not(:disabled):focus {
  background-color: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--light);
  border-color: transparent;
}

.swiper-button-prev:after {
  mask-image: url('../../assets/images/icons/arrow_back.svg');
}

.swiper-button-next:after {
  mask-image: url('../../assets/images/icons/arrow_forward.svg');
}


.wp-block-fluxit-carousel[class*="arrows-top"] {
  display: flex;
  flex-direction: column;

  .swiper-navigation {
    order: -1;
    margin-top: 0;
    margin-bottom: 4em;
  }
}

.arrows-top-left .swiper-navigation,
.arrows-bottom-left .swiper-navigation {
  justify-content: flex-start;
}

.arrows-top-right .swiper-navigation,
.arrows-bottom-right .swiper-navigation {
  justify-content: flex-end;
}

.arrows-top-center .swiper-navigation,
.arrows-bottom-center .swiper-navigation {
  justify-content: center;
}

.swiper.has-overflow {
  overflow: visible;
}

.alignfull:has( .swiper.has-overflow) {
  overflow: hidden;
}