/*
|--------------------------------------------------------------------------
| Scroll to Top
|--------------------------------------------------------------------------
*/

.scroll-to-top {
    position:
        fixed;

    right:
        calc(
            1rem
            + env(safe-area-inset-right)
        );

    bottom:
        calc(
            1rem
            + env(safe-area-inset-bottom)
        );

    z-index:
        50;

    display:
        inline-flex;

    width:
        3.5rem;

    height:
        3.5rem;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        var(--color-accent);

    background:
        var(--color-background);

    border:
        2px solid
        var(--color-accent);

    border-radius:
        50%;

    box-shadow:
        0
        0.25rem
        1rem
        rgb(0 0 0 / 18%);

    cursor:
        pointer;

    transition:
        color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.scroll-to-top[hidden] {
    display:
        none;
}

.scroll-to-top:hover {
    color:
        var(--color-background);

    background:
        var(--color-accent);

    box-shadow:
        0
        0.375rem
        1.25rem
        rgb(0 0 0 / 24%);

    transform:
        translateY(-2px);
}

.scroll-to-top:active {
    transform:
        translateY(0);
}

.scroll-to-top:focus-visible {
    outline:
        3px solid
        var(--color-accent);

    outline-offset:
        3px;
}

.scroll-to-top__icon {
    display:
        block;

    width:
        1.625rem;

    height:
        1.625rem;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

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