/* Slider navigation button */
/* Dark background (default) or .light background */
/* Next arrow (default) or .previous arrow */
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  background-color: transparent;
  border: none;
  appearance: none;
  cursor: pointer;
  transition: var(--default-transition);
}
.nav-button:after {
  display: block;
  width: 20px;
  height: 17px;
  content: "";
  background-color: var(--colour-white);
  mask-image: url(/icons/arrow.svg);
  mask-size: 100%;
  transition: var(--default-transition);
}
.nav-button:hover {
  background-color: rgba(255,255,255,0.16);
}

/* Dark arrow for light backgrounds. */
.nav-button.light:after {
  background-color: var(--colour-black);
}
.nav-button.light:hover {
  background-color: var(--colour-black);
}
.nav-button.light:hover:after {
  background-color: var(--colour-white);
}

/* Previous button: flip the arrow. */
.nav-button.previous:after {
  transform: scale(-1);
}

/* Disabled button. */
.nav-button.disabled {
  pointer-events: none;
  opacity: .3;
}

@media (min-width: 1024px) {
  .nav-button {
    height: 49px;
    width: 49px;
  }
  .nav-button:after {
    width: 27px;
    height: 22.235px;
  }
}