/* public/CSS/_Components/back_to_top.css
   The back-to-top button (views/_Components/back_to_top.ejs): round like the
   theme switch, fixed at the bottom right, above the page's content. */

.back-to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--surface-background);
  color: var(--body-text);
  cursor: pointer;
  /* Hidden until the page is scrolled (the class is-visible). visibility also
     takes it out of the Tab order while it cannot be seen. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, border-color 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  border-color: var(--muted-text);
}

@media (min-width: 860px) {
  .back-to-top {
    right: 28px;
    bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}