/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    SCROLL TO TOP
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


.sv-marketplace-sitevision-toTop button {
    background-color: rgba(var(--color-grey-darker-rgb), 0.6) !important;
    height: 44px;
    min-height: unset !important;
    right: 20px;
    transition: background-color 0.2s ease-in-out !important;
    width: 44px;
    z-index: 9999;
}

@media screen and (min-width: 768px) {
    .sv-marketplace-sitevision-toTop button {
        right: 40px;
    }
}

.sv-marketplace-sitevision-toTop button::before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMiw4bC02LDZsMS40LDEuNGw0LjYtNC42bDQuNiw0LjZMMTgsMTRMMTIsOHoiLz4NCjwvc3ZnPg0K);
    background-repeat: no-repeat;
    background-size: 1.6rem;
    content: " ";
    display: inline-block;
    height: 1.6rem;
    left: calc((44px - 1.6rem) / 2);
    min-width: 1.3rem;
    position: absolute;
    top: calc((44px - 1.6rem) / 2);
    width: 1.6rem;
}

.sv-marketplace-sitevision-toTop button:hover,
.sv-marketplace-sitevision-toTop button:focus-visible {
    border-radius: 50%;
    border: none;
}

.sv-marketplace-sitevision-toTop button:hover {
    background-color: rgba(var(--color-grey-darker-rgb), 1) !important;
}

/* The focus outline is a little bit harder to see on this button since it is round so we increase
    the outline width to 4px */
.sv-marketplace-sitevision-toTop button:focus-visible {
    outline: 4px solid var(--color-focus);
}

.sv-marketplace-sitevision-toTop button div svg {
    display: none;
}