/**
 * @file
 * Scroll to top (biopama_libraries/scroll-top): the button's dimensions, its
 * place in the stack, and its enter / exit animation.
 *
 * Bootstrap 5 utilities on the button itself carry everything they can (btn,
 * btn-warning, text-white, rounded-circle, shadow, position-fixed, bottom-0,
 * end-0, m-3, d-flex, d-print-none). What is left is what Bootstrap has no
 * class for: a circle needs equal width and height, a fixed element needs a
 * z-index, and an animation needs a transition.
 *
 * Hover feedback is Bootstrap's own btn-warning background change; text-white
 * holds the arrow white through it. Nothing here moves or resizes on hover.
 *
 * The button is hidden rather than absent so it can animate both ways.
 * `visibility` is transitioned with the fade — instantly on the way in, after
 * the fade on the way out — which keeps the hidden button out of the tab
 * order and out of the accessibility tree with no extra state in the JS.
 *
 * z-index 1030 is Bootstrap's own "fixed" tier: above the sticky navbar
 * (1020), below every dialog, offcanvas and tooltip.
 */

.biopama-scroll-top {
  --biopama-scroll-top-size: 3rem;
  --biopama-scroll-top-rise: 1rem;
  --biopama-scroll-top-speed: 0.25s;

  width: var(--biopama-scroll-top-size);
  height: var(--biopama-scroll-top-size);
  padding: 0;
  line-height: 1;
  z-index: 1030;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--biopama-scroll-top-rise));
  transition:
    opacity var(--biopama-scroll-top-speed) ease,
    transform var(--biopama-scroll-top-speed) ease,
    visibility 0s linear var(--biopama-scroll-top-speed);
}

.biopama-scroll-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--biopama-scroll-top-speed) ease,
    transform var(--biopama-scroll-top-speed) ease,
    visibility 0s;
}

.biopama-scroll-top .fa-arrow-up {
  font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .biopama-scroll-top,
  .biopama-scroll-top--visible {
    transition: none;
    transform: none;
  }
}