/* Keep native scrolling, hit testing and gutters; animate only the thumb ink. */
@property --bb-scrollbar-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

:root[data-page-ready="studio"] {
  --bb-scrollbar-color: color-mix(in srgb, var(--accent) 65%, var(--muted));
}

:root[data-page-ready="studio"],
:root[data-page-ready="studio"] * {
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--bb-scrollbar-color) calc(var(--bb-scrollbar-opacity) * 100%), transparent) transparent !important;
}

:root[data-page-ready="studio"][data-scrollbars="auto"],
:root[data-page-ready="studio"][data-scrollbars="auto"] * {
  --bb-scrollbar-opacity: 0;
}

:root[data-page-ready="studio"][data-scrollbars="auto"][data-scrollbar-active],
:root[data-page-ready="studio"][data-scrollbars="auto"] [data-scrollbar-active] {
  --bb-scrollbar-opacity: 1;
}

/* Chromium/WebKit ignore their scrollbar pseudo-elements when the standard
   width/color properties are not auto. Firefox retains the thin native style. */
@supports selector(::-webkit-scrollbar) {
  @media (forced-colors: none) {
    :root[data-page-ready="studio"],
    :root[data-page-ready="studio"] * {
      scrollbar-width: auto !important;
      scrollbar-color: auto !important;
    }
    :root[data-page-ready="studio"]::-webkit-scrollbar,
    :root[data-page-ready="studio"] *::-webkit-scrollbar {
      display: block;
      width: 10px;
      height: 10px;
      background: transparent;
    }
    :root[data-page-ready="studio"]::-webkit-scrollbar-thumb,
    :root[data-page-ready="studio"] *::-webkit-scrollbar-thumb {
      --bb-scrollbar-opacity: inherit;
      min-height: 32px;
      min-width: 32px;
      border: 2px solid transparent;
      border-radius: 999px;
      background: color-mix(in srgb, var(--bb-scrollbar-color) calc(var(--bb-scrollbar-opacity) * 100%), transparent);
      background-clip: padding-box;
    }
    :root[data-page-ready="studio"]::-webkit-scrollbar-track,
    :root[data-page-ready="studio"] *::-webkit-scrollbar-track,
    :root[data-page-ready="studio"]::-webkit-scrollbar-corner,
    :root[data-page-ready="studio"] *::-webkit-scrollbar-corner {
      background: transparent;
    }
    :root[data-page-ready="studio"]::-webkit-scrollbar-button,
    :root[data-page-ready="studio"] *::-webkit-scrollbar-button {
      display: none;
    }
  }
}

/* High contrast keeps the operating system's visible, full-size controls. */
@media (forced-colors: active) {
  :root[data-page-ready="studio"],
  :root[data-page-ready="studio"] * {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }
}