/* =========================================================
   SCROLL NAVIGATION CUES
   ========================================================= */


/*
  UP ARROW:
  fixed to TOP centre of viewport.

  DOWN ARROW:
  fixed to BOTTOM centre of viewport.
*/


.scroll-cues {
  position: static;

  width: 0;
  height: 0;

  pointer-events: none;
}



/* =========================================================
   SHARED ARROW BUTTON
   ========================================================= */

.scroll-cue {
  position: fixed !important;

  left: 50% !important;

  z-index: 9999;

  width: 30px;
  height: 22px;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform: translateX(-50%);

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}


.scroll-cue.is-visible {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}



/* =========================================================
   UP = TOP OF VIEWPORT
   ========================================================= */

.scroll-cue--up {
  top: 20px !important;
  bottom: auto !important;
}



/* =========================================================
   DOWN = BOTTOM OF VIEWPORT
   ========================================================= */

.scroll-cue--down {
  top: auto !important;
  bottom: 20px !important;
}



/* =========================================================
   ARROW SHAPE
   ========================================================= */

.scroll-cue::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 10px;

  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);

  opacity: 0.5;

  transition: opacity 150ms ease;
}



/* DOWN CHEVRON */

.scroll-cue--down::before {
  transform:
    translate(-50%, -65%)
    rotate(45deg);
}



/* UP CHEVRON */

.scroll-cue--up::before {
  transform:
    translate(-50%, -35%)
    rotate(225deg);
}



/* =========================================================
   HOVER
   ========================================================= */

.scroll-cue:hover::before,
.scroll-cue:focus-visible::before {
  opacity: 0.9;
}


.scroll-cue:focus-visible {
  outline: none;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .scroll-cue--up {
    top: 14px !important;
    bottom: auto !important;
  }


  .scroll-cue--down {
    top: auto !important;
    bottom: 14px !important;
  }


  .scroll-cue {
    width: 28px;
    height: 20px;
  }


  .scroll-cue::before {
    width: 9px;
    height: 9px;

    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .scroll-cue {
    transition: none;
  }

}