/*
* Global button styling
*/
/*
* Breakpoint debugging
*/
/*
* MEDIA QUERIES
* Breakpoints for responsive sites
*/
/*
* SASS Parent append
* Useful if you want to add an append to the parent without writing it out again
* Usage: @include parent-append(":hover")
* Source: https://codepen.io/imkremen/pen/RMVBvq
*/
/*
* Skew
* Useful mixing to create skewed edges
* Usage: @include angle-edge(bottomright, 3deg, topleft, 3deg, #fff);
* Source: http://www.hongkiat.com/blog/skewed-edges-css/
*/
.block-carousel-navigation,
.team-modal-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--normal);
  align-items: center;
  margin-top: var(--wp--preset--spacing--large);
}
@media (max-width: 500px) {
  .block-carousel-navigation,
  .team-modal-navigation {
    flex-direction: row-reverse;
    gap: var(--wp--preset--spacing--large);
  }
}
.block-carousel-navigation .swiper-navigation,
.team-modal-navigation .swiper-navigation {
  position: relative;
  max-width: 200px;
  display: flex;
  gap: var(--wp--preset--spacing--x-small);
  --swiper-navigation-size: 12px;
  --swiper-navigation-color: var(--wp--preset--color--white);
}
.block-carousel-navigation .swiper-navigation .swiper-button-next,
.block-carousel-navigation .swiper-navigation .swiper-button-prev,
.team-modal-navigation .swiper-navigation .swiper-button-next,
.team-modal-navigation .swiper-navigation .swiper-button-prev {
  position: initial;
  width: 60px;
  height: 60px;
  background: var(--swiper-navigation-bg, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  font-weight: 900;
  transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: auto;
}
.block-carousel-navigation .swiper-navigation .swiper-button-next:hover,
.block-carousel-navigation .swiper-navigation .swiper-button-prev:hover,
.team-modal-navigation .swiper-navigation .swiper-button-next:hover,
.team-modal-navigation .swiper-navigation .swiper-button-prev:hover {
  background: var(--swiper-navigation-bg-hover, rgba(255, 255, 255, 0.2));
}
.block-carousel-navigation .swiper-progress,
.team-modal-navigation .swiper-progress {
  position: relative;
  height: 2px;
  border-radius: 999px;
  width: 100%;
  max-width: 220px;
  background: var(--swiper-progress-color, rgba(255, 255, 255, 0.1));
  overflow: hidden;
  transition: 150ms ease;
  margin-left: auto;
}
.block-carousel-navigation .swiper-progress::before,
.team-modal-navigation .swiper-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--carousel-progress, 0);
  background: var(--swiper-progress-fill-color, var(--wp--preset--color--white));
  border-radius: 999px;
  transition: 450ms ease;
}
.block-carousel-navigation.dark .swiper-navigation,
.team-modal-navigation.dark .swiper-navigation {
  --swiper-navigation-color: #121212;
  --swiper-navigation-bg: rgba(0, 0, 0, 0.1);
  --swiper-navigation-bg-hover: rgba(0, 0, 0, 0.3);
}
.block-carousel-navigation.dark .swiper-progress,
.team-modal-navigation.dark .swiper-progress {
  --swiper-progress-color: rgba(0, 0, 0, 0.1);
  --swiper-progress-fill-color: #121212;
}/*# sourceMappingURL=block-carousel-navigation.css.map */