.bo-scroll-top {
    --bo-scroll-top-size: 4rem;
    --bo-scroll-top-bg: var(--bo-theme-primary, #0d6efd);
    --bo-scroll-top-color: var(--bo-theme-on-primary, #fff);
    position: fixed;
    inset-inline-end: 2rem;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0));
    z-index: 1000;
    width: var(--bo-scroll-top-size);
    height: var(--bo-scroll-top-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--bo-scroll-top-bg);
    color: var(--bo-scroll-top-color);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.94);
    box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease, box-shadow .22s ease;
}

.bo-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.bo-scroll-top--left {
    inset-inline: 2rem auto;
}

.bo-scroll-top--small { --bo-scroll-top-size: 2.75rem; }
.bo-scroll-top--medium { --bo-scroll-top-size: 3.25rem; }
.bo-scroll-top--large { --bo-scroll-top-size: 4rem; }
.bo-scroll-top--rounded { border-radius: .75rem; }

.bo-scroll-top__icon {
    width: 1.45rem;
    height: 1.45rem;
    pointer-events: none;
}

.bo-scroll-top:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.bo-scroll-top-sentinel {
    width: 1px;
    height: 1px;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .bo-scroll-top:hover {
        box-shadow: 0 14px 32px rgb(0 0 0 / 22%);
        transform: translateY(-1px) scale(1.02);
    }
}

@media (min-width: 577px) {
    .bo-scroll-top--hide-desktop { display: none; }
}

@media (max-width: 576px) {
    .bo-scroll-top {
        inset-inline-end: 1rem;
        inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0));
    }

    .bo-scroll-top--left { inset-inline: 1rem auto; }
    .bo-scroll-top--hide-mobile { display: none; }
    .bo-scroll-top--large { --bo-scroll-top-size: 3.5rem; }
}

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