/* Shared native scrollbars: the page, project dialogs and overflow regions. */
:root {
  --scrollbar-track: #0d110f;
  --scrollbar-thumb: #548565;
  --scrollbar-thumb-hover: #7fe7a5;
  --scrollbar-thumb-active: #a3f0bf;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html {
  scrollbar-gutter: stable;
}

* {
  scrollbar-width: thin;
}

/* Engines without the standard properties retain the same palette. */
@supports not (scrollbar-color: #548565 #0d110f) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
  }

  ::-webkit-scrollbar-thumb {
    min-height: 40px;
    border: 3px solid var(--scrollbar-track);
    border-radius: 999px;
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active);
  }
}

@media (pointer: coarse), (forced-colors: active) {
  * {
    scrollbar-width: auto;
  }
}

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

  * {
    --scrollbar-track: Canvas;
    --scrollbar-thumb: ButtonText;
    --scrollbar-thumb-hover: Highlight;
    --scrollbar-thumb-active: Highlight;
  }
}