/* Location: D:\ironcore\frontend\nova_ironcore\assets\css\components\site-scrollbar.css */
.home-hero,
.gallery-shell,
.prices-shell,
[data-gallery-viewport] {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.home-hero.is-scrollbar-active,
.gallery-shell.is-scrollbar-active,
.prices-shell.is-scrollbar-active,
[data-gallery-viewport].is-scrollbar-active {
  scrollbar-color: var(--site-scroll-thumb-color) var(--site-scroll-track-color);
}

.home-hero::-webkit-scrollbar,
.gallery-shell::-webkit-scrollbar,
.prices-shell::-webkit-scrollbar,
[data-gallery-viewport]::-webkit-scrollbar {
  width: var(--site-scroll-size);
  height: var(--site-scroll-size);
}

.home-hero::-webkit-scrollbar-track,
.gallery-shell::-webkit-scrollbar-track,
.prices-shell::-webkit-scrollbar-track,
[data-gallery-viewport]::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.home-hero::-webkit-scrollbar-thumb,
.gallery-shell::-webkit-scrollbar-thumb,
.prices-shell::-webkit-scrollbar-thumb,
[data-gallery-viewport]::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 1px solid transparent;
}

.home-hero.is-scrollbar-active::-webkit-scrollbar-track,
.gallery-shell.is-scrollbar-active::-webkit-scrollbar-track,
.prices-shell.is-scrollbar-active::-webkit-scrollbar-track,
[data-gallery-viewport].is-scrollbar-active::-webkit-scrollbar-track {
  background: var(--site-scroll-track-color);
}

.home-hero.is-scrollbar-active::-webkit-scrollbar-thumb,
.gallery-shell.is-scrollbar-active::-webkit-scrollbar-thumb,
.prices-shell.is-scrollbar-active::-webkit-scrollbar-thumb,
[data-gallery-viewport].is-scrollbar-active::-webkit-scrollbar-thumb {
  background: var(--site-scroll-thumb-gradient);
  border-color: rgba(255, 255, 255, 0.08);
}

.home-hero.is-scrollbar-active::-webkit-scrollbar-thumb:hover,
.gallery-shell.is-scrollbar-active::-webkit-scrollbar-thumb:hover,
.prices-shell.is-scrollbar-active::-webkit-scrollbar-thumb:hover,
[data-gallery-viewport].is-scrollbar-active::-webkit-scrollbar-thumb:hover {
  background: var(--site-scroll-thumb-gradient-hover);
}

@media (max-width: 700px) {
  .home-hero,
  .gallery-shell,
  .prices-shell,
  [data-gallery-viewport] {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }

  .home-hero.is-scrollbar-active,
  .gallery-shell.is-scrollbar-active,
  .prices-shell.is-scrollbar-active,
  [data-gallery-viewport].is-scrollbar-active {
    scrollbar-width: thin;
  }

  .home-hero::-webkit-scrollbar,
  .gallery-shell::-webkit-scrollbar,
  .prices-shell::-webkit-scrollbar,
  [data-gallery-viewport]::-webkit-scrollbar {
    width: var(--site-scroll-size-mobile);
    height: var(--site-scroll-size-mobile);
  }
}
