/* Loaded only while Custom Scrollbar Editor is enabled. */
html:not(.et-fb-root-ancestor) {
  /* Chromium/Safari use the pixel-accurate pseudo-element rules below. */
  scrollbar-gutter: stable;
}

html:not(.et-fb-root-ancestor)::-webkit-scrollbar {
  width: var(--ds-scrollbar-width, initial) !important;
  height: var(--ds-scrollbar-width, initial) !important;
}

html:not(.et-fb-root-ancestor)::-webkit-scrollbar-track {
  border-radius: var(--ds-scrollbar-radius, 0) !important;
  background-color: var(--ds-scrollbar-track, transparent) !important;
}

html:not(.et-fb-root-ancestor)::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: var(--ds-scrollbar-gap, 0) solid transparent;
  border-radius: var(--ds-scrollbar-radius, 0) !important;
  background-color: var(--ds-scrollbar-thumb, currentColor) !important;
  background-clip: padding-box !important;
}

html:not(.et-fb-root-ancestor)::-webkit-scrollbar-thumb:hover {
  background: var(--ds-scrollbar-hover, var(--ds-scrollbar-thumb, currentColor)) !important;
  background-clip: padding-box !important;
}

html:not(.et-fb-root-ancestor)::-webkit-scrollbar-corner {
  background: var(--ds-scrollbar-track, transparent);
}

@media (forced-colors: active) {
  :root { scrollbar-color: auto; }
}

/* Firefox exposes colors and two native width modes, but not pixel geometry. */
@supports (-moz-appearance: none) {
  html:not(.et-fb-root-ancestor) {
    scrollbar-color: var(--ds-scrollbar-thumb, auto) var(--ds-scrollbar-track, auto);
    scrollbar-width: var(--ds-scrollbar-firefox-width, auto);
  }
}