/* ParsKala shared scrollbar appearance.
 * This stylesheet controls only the scrollbar visuals. It intentionally does not
 * create scroll areas or set overflow, height, max-height, or scroll behavior.
 * Add `prk-scrollbar` to any existing scroll container to reuse the same design.
 */
:root {
  --prk-scrollbar-size: 3px;
  --prk-scrollbar-track: transparent;
  --prk-scrollbar-thumb: rgba(148, 163, 184, .32);
  --prk-scrollbar-thumb-hover: rgba(148, 163, 184, .48);
  --prk-scrollbar-radius: 999px;
}

/* Reusable utility plus the standard mega-menu and ParsKala tab navigation. */
.prk-scrollbar,
.mega-menu,
.prk-interactive--tabs .prk-ic-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--prk-scrollbar-thumb) var(--prk-scrollbar-track);
}

/*
 * Chromium/WebKit: use the explicit 3px pseudo-element width.
 * On modern Chromium, `scrollbar-width: thin` can take precedence over
 * ::-webkit-scrollbar sizing and leave the scrollbar around 8–9px wide.
 * Firefox keeps the standards-based thin scrollbar through the rule above.
 */
@supports selector(::-webkit-scrollbar) {
  .prk-scrollbar,
  .mega-menu,
  .prk-interactive--tabs .prk-ic-nav {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}

.prk-scrollbar::-webkit-scrollbar,
.mega-menu::-webkit-scrollbar,
.prk-interactive--tabs .prk-ic-nav::-webkit-scrollbar {
  width: var(--prk-scrollbar-size);
  height: var(--prk-scrollbar-size);
}

.prk-scrollbar::-webkit-scrollbar-track,
.mega-menu::-webkit-scrollbar-track,
.prk-interactive--tabs .prk-ic-nav::-webkit-scrollbar-track {
  background: var(--prk-scrollbar-track);
  border-radius: var(--prk-scrollbar-radius);
}

.prk-scrollbar::-webkit-scrollbar-thumb,
.mega-menu::-webkit-scrollbar-thumb,
.prk-interactive--tabs .prk-ic-nav::-webkit-scrollbar-thumb {
  background: var(--prk-scrollbar-thumb);
  border-radius: var(--prk-scrollbar-radius);
}

.prk-scrollbar::-webkit-scrollbar-thumb:hover,
.mega-menu::-webkit-scrollbar-thumb:hover,
.prk-interactive--tabs .prk-ic-nav::-webkit-scrollbar-thumb:hover {
  background: var(--prk-scrollbar-thumb-hover);
}

.prk-scrollbar::-webkit-scrollbar-button,
.mega-menu::-webkit-scrollbar-button,
.prk-interactive--tabs .prk-ic-nav::-webkit-scrollbar-button {
  display: none;
}