/*
 * Boton de "volver arriba" de las invitaciones.
 *
 * Una invitacion es una sola pagina larga: la de lovely mide casi doce mil
 * pixeles. Quien llega al final para confirmar su asistencia y luego quiere
 * releer la direccion tiene que arrastrar el dedo una docena de veces. Varios
 * disenos traian un enlace de subir dentro del pie, que solo aparece cuando ya
 * estas abajo del todo y no sirve en el medio.
 *
 * Vive con el resto del cromo porque tiene que llegar a los doce disenos
 * por igual: lo inyecta InvitationPageRenderer junto al watermark y las
 * correcciones de contraste.
 *
 * La posicion se calcula con las mismas variables que el reproductor de musica
 * para que los flotantes no se pisen: musica a la izquierda, subir a la
 * derecha, ambos por encima de la barra del showroom cuando existe.
 */

.b13-scroll-top {
    position: fixed;
    z-index: 1340;
    right: max(16px, env(safe-area-inset-right));
    /* Otros flotantes caen en la misma esquina: el aviso de analytics, que mide
       hasta 480px de ancho y no siempre se responde, y el reproductor de musica
       en los diseños que lo mueven a la derecha. Sin apartarse, el boton
       quedaba debajo de ellos y no se podia pulsar. invitation-runtime.js mide
       lo que de verdad comparte columna con el boton y publica el hueco aqui,
       igual que --demo-banner-height y --showroom-bar-height. */
    bottom: calc(
        16px
        + env(safe-area-inset-bottom)
        + var(--showroom-bar-height, 0px)
        + var(--b13-corner-clearance, 0px)
    );

    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(24, 20, 26, .82);
    color: #fff;
    cursor: pointer;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);

    /* Fuera del alcance del puntero y del lector mientras esta oculto: un boton
       transparente que sigue recibiendo clics es peor que no tenerlo. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.b13-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.b13-scroll-top:hover,
.b13-scroll-top:focus-visible {
    background: rgba(24, 20, 26, .94);
}

.b13-scroll-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.b13-scroll-top__icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sin JavaScript el boton no puede aparecer ni desaparecer, asi que no se
   muestra: un ancla permanente tapando la esquina no aporta nada. */
.b13-scroll-top[hidden] {
    display: none;
}

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

    .b13-scroll-top {
        transition: opacity .01s linear, visibility 0s linear .01s;
    }
}

@media (max-width: 575px) {
    .b13-scroll-top {
        width: 44px;
        height: 44px;
    }
}