{% set topLinkTitle = "Back to Top" %}

<a href="#top" class="top-btn" title="{{ topLinkTitle }}">
    {{ topLinkTitle }}
</a>

<style>
    .top-btn,
    .top-btn:hover {
        color: var(--clr-top-btn-txt);
        text-decoration: none;
    }

    .top-btn {
        position: fixed;
        bottom: 0.5rem;
        right: 0.5rem;
        z-index: 999;

        background-color: var(--clr-top-btn-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50em;
        padding: 0.3em 0.5em;
    }

    .top-btn:focus {
        outline: 0.25em solid var(--clr-top-btn-bg);
        outline-offset: 0.15em;
    }

    .top-btn::before {
        --arrow-margin: 0.3em;
        content: "";
        display: inline-block;
        border-bottom: 0.6rem solid currentColor;
        border-left: 0.4rem solid transparent;
        border-right: 0.4rem solid transparent;
    }

    .top-btn::before {
        margin: 0 var(--arrow-margin) 0 0;
    }
</style>