@layer components {
  .back-to-top.btn {
    --btn-size: 2.5rem;
    --icon-size: 50%;

    box-shadow: var(--shadow);
    inset-block-end: calc(var(--block-space) + var(--custom-safe-inset-bottom));
    inset-inline-start: calc(var(--main-padding) + var(--custom-safe-inset-left));
    position: fixed;
    transition: opacity var(--duration-medium) ease-out, visibility 0s var(--duration-medium);
    z-index: calc(var(--z-bar) - 1);

    &:not(.back-to-top--shown) {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    &.back-to-top--shown {
      transition: opacity var(--duration-medium) ease-out, visibility 0s;
    }

    /* Above the bar, so it never covers the bar's buttons. */
    #footer:has(.bar) & {
      inset-block-end: calc(var(--footer-height) + var(--custom-safe-inset-bottom) + var(--block-space));
    }

    /* From 800 up the pins tray stacks its cards above the bar's left end. */
    @media (width >= 800px) {
      #footer:has(.tray--pins) & {
        inset-inline-start: calc(var(--tray-margin, 0.5rem) + var(--tray-size) + var(--inline-space));
      }
    }

    @media print {
      display: none;
    }
  }
}