/* ==========================================================================
   Back to top
   ========================================================================== */

.back-to-top {
    position: fixed;
    right: max(
        var(--space-250),
        calc((100vw - 1280px) / 2 - var(--space-200))
    );
    bottom: calc(var(--space-500) + env(safe-area-inset-bottom));
    z-index: var(--z-header);

    display: grid;
    place-items: center;

    width: calc(var(--space-500) - var(--space-050));
    height: calc(var(--space-500) - var(--space-050));
    padding: 0;

    border: 0;
    border-radius: var(--radius-full);

    background-color: color-mix(
            in srgb,
            var(--color-secondary) 70%,
            white
        );

    color: var(--color-white);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    box-shadow: none;
    cursor: pointer;

    transition:
        opacity var(--transition-fast) var(--ease),
        visibility 0s linear var(--transition-fast),
        background-color var(--transition-fast) var(--ease);
}

.back-to-top[data-visible] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition-delay: 0s;
}

.back-to-top__icon {
    display: block;

    width: var(--icon-md);
    height: var(--icon-md);
}

@media (hover: hover) {

    .back-to-top:hover {
        background-color: color-mix(
            in srgb,
            var(--color-secondary) 90%,
            var(--color-primary)
        );
    }

}

.back-to-top:active {
    background-color: color-mix(
        in srgb,
        var(--color-secondary) 82%,
        var(--color-primary)
    );
}

.back-to-top:focus-visible {
    outline: 2px solid var(--color-focus-light);
    outline-offset: 4px;
}

@media (max-width: 1023px) {

    .back-to-top {
        right: var(--space-200);
    }

}