.site-scroll-to-top {
  position: fixed;
  inset-block-end: var(--hs-spacing-large);
  inset-inline-end: var(--hs-spacing-large);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--hs-palette-button-primary-main);
  color: var(--hs-palette-button-primary-contrast);
  box-shadow: var(--hs-shadow-dark);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--hs-spacing-base));
  transition-property: opacity, visibility, transform, background-color;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

/* Server-rendered state only (avoids a flash before JS runs); JS removes [hidden] on init so the
   opacity/transform transition can animate. Author "display: flex" above overrides the UA rule. */
.site-scroll-to-top[hidden] {
  display: none;
}

.site-scroll-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-scroll-to-top:hover {
  background-color: var(--hs-palette-button-primary-highlight);
}

.site-scroll-to-top:focus-visible {
  outline: 2px solid var(--hs-palette-button-primary-contrast);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-scroll-to-top {
    transition: none;
  }
}