/* Hide native scrollbar — custom bar on the left */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.custom-scrollbar {
  position: fixed;
  left: clamp(10px, 2vw, 18px);
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 850;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.custom-scrollbar.is-visible {
  opacity: 1;
  visibility: visible;
}

.custom-scrollbar__thumb {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 48px;
  border-radius: 99px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(200, 169, 110, 0.75) 100%
  );
  box-shadow: 0 0 12px rgba(200, 169, 110, 0.25);
  will-change: transform, height;
}

body.site-nav-open .custom-scrollbar {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.is-building-picker-open .custom-scrollbar,
body.is-building-plan-open .custom-scrollbar {
  opacity: 0 !important;
  visibility: hidden !important;
}