---
import { Icon } from "astro-icon/components";
---

<!-- There can't be a filter on parent element, or it will break `fixed` -->
<div class="back-to-top-wrapper block">
    <div id="back-to-top-btn" class="back-to-top-btn z-100 hide flex items-center rounded-2xl overflow-hidden transition"
         onclick="backToTop()">
        <button aria-label="Back to Top" class="btn-card h-full w-full">
            <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
        </button>
    </div>
</div>

<style lang="stylus">
    .back-to-top-wrapper
        width: 3rem
        height: 3rem
        position: absolute
        right: 0
        top: 0
        pointer-events: none

    .back-to-top-btn
        color: var(--primary)
        font-size: 2.25rem
        font-weight: bold
        border: none
        position: fixed
        bottom: 6.78rem
        opacity: 1
        right: 1rem
        cursor: pointer
        translate: 0 0
        pointer-events: auto
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
        box-shadow:
            0 0 0 1px var(--btn-regular-bg),
            0 0 1em var(--btn-regular-bg);

        button
            width: 3rem
            height: 3rem

        i
            font-size: 1.75rem

        &.hide
            translate: 0 2rem
            scale: 0.9
            opacity: 0
            pointer-events: none

        &:active
            scale: 0.9

    // Mobile
    @media (max-width: 768px)
        .back-to-top-btn
            bottom: 5.5rem
            right: 0.5rem
            font-size: 2rem
            &.hide
                translate: 0 2rem
                scale: 0.9
            &:active
                scale: 0.9
</style>

<script is:raw is:inline>
function backToTop() {
    // 直接使用原生滚动，避免OverlayScrollbars冲突
    window.scroll({ top: 0, behavior: 'smooth' });
}
</script>