.cern-scroll-to-top-wrap {
    --cern-scroll-to-top-base-bottom: 20px;
    position: fixed;
    right: var(--wp--preset--spacing--20, 20px);
    bottom: var(--cern-scroll-to-top-base-bottom);
    z-index: 20;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 150ms ease-in-out,
        transform 150ms ease-in-out;
}

.cern-scroll-to-top-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cern-scroll-to-top {
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgb(0 0 0 / 85%);
    color: var(--wp--preset--color--white, #fff);
    fill: currentcolor;
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
}

.cern-scroll-to-top svg {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.65;
    transform: rotate(-90deg);
    transition:
        transform 150ms ease-in-out,
        opacity 150ms ease-in-out;
}

.cern-scroll-to-top:hover,
.cern-scroll-to-top:focus-visible {
    background: rgb(0 0 0 / 95%);
}

.cern-scroll-to-top:hover svg,
.cern-scroll-to-top:focus-visible svg {
    opacity: 1;
    transform: rotate(-90deg) scale(1.1) translateX(0.15em);
}

.cern-scroll-to-top:focus-visible {
    outline: 2px solid var(--wp--preset--color--white, #fff);
    outline-offset: 2px;
}

.cern-scroll-to-top-tooltip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgb(0 0 0 / 95%);
    color: var(--wp--preset--color--white, #fff);
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    padding: 0.45rem 0.6rem;
    border-radius: 0.35rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.cern-scroll-to-top:hover + .cern-scroll-to-top-tooltip,
.cern-scroll-to-top:focus-visible + .cern-scroll-to-top-tooltip {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cern-scroll-to-top-wrap,
    .cern-scroll-to-top,
    .cern-scroll-to-top svg,
    .cern-scroll-to-top-tooltip {
        transition: none;
    }
}

@media (max-width: 800px), (width <= 800px) {
    .cern-scroll-to-top-wrap {
        --cern-scroll-to-top-base-bottom: max(
            12px,
            env(safe-area-inset-bottom)
        );
        right: max(12px, env(safe-area-inset-right));
    }

    .cern-scroll-to-top-tooltip {
        display: none;
    }
}