.scroll-to-top {
  /* Themeable Variables */
  --stt-bg-color: var(--bs-white, #ffffff);
  --stt-hover-color: var(--bs-primary-dark, #0056b3);
  --stt-text-color: var(--bs-primary, #0056b3);
  --stt-size: 2rem;
  --stt-offset-bottom: 2rem;
  --stt-offset-side: 2rem;
  --stt-z-index: 999;

  position: fixed;
  bottom: var(--stt-offset-bottom);
  z-index: var(--stt-z-index);
  width: var(--stt-size);
  height: var(--stt-size);
  border-radius: 50%;
  background-color: var(--stt-bg-color);
  color: var(--stt-text-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);

  svg {
    width: var(--stt-size);
    height: var(--stt-size);
    fill: var(--stt-text-color);
  }
}

.scroll-to-top[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: var(--stt-hover-color);
  transform: translateY(-2px);
}

.scroll-to-top--bottom-right {
  right: var(--stt-offset-side);
}

.scroll-to-top--bottom-left {
  left: var(--stt-offset-side);
}

@media (max-width: 767px) {
  .scroll-to-top--hide-mobile {
    display: none !important;
  }
}