/*
 * to-top - the floating "back to top" button, bottom right.
 *
 * Loaded from site/layouts/app.blade.php: like the header, the footer and the
 * call bar it is chrome, so every page carries it. template.js removes the
 * `hidden` attribute once the page has been scrolled past a screenful, which is
 * why there is no rule here for the hidden state - the attribute does it.
 *
 * Stacking: below the call bar (1050) and the sticky header (1040), so it can
 * never sit on top of either. Below 768px it clears the call bar by that bar's
 * own height token, the same one the consent banner uses.
 */
.to-top {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--site-call-bar-h) + 0.75rem);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--site-primary);
    border-radius: 50%;
    background-color: var(--site-primary);
    color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    cursor: pointer;
}

.to-top > i {
    font-size: 1rem;
    line-height: 1;
}

.to-top:hover,
.to-top:focus-visible {
    background-color: var(--site-accent);
    border-color: var(--site-accent);
    color: var(--site-primary);
}

@media (min-width: 768px) {
    .to-top {
        right: 1.25rem;
        bottom: 1.25rem;
        width: 3rem;
        height: 3rem;
    }
}