/* Dröma · native scrolling, shared by the site and embedded tools. */
:root {
  --droma-scroll-track: #101110;
  --droma-scroll-thumb: #7b8d55;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--droma-scroll-thumb) var(--droma-scroll-track);
}

/* Keep the rounded WebKit treatment in browsers that also support the
   standard properties; non-auto standard values would take precedence. */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  *::-webkit-scrollbar-track {
    background: var(--droma-scroll-track);
    border-radius: 999px;
  }

  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9aac6c, #63743e);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
  }

  *::-webkit-scrollbar-thumb:vertical {
    min-height: 44px;
  }

  *::-webkit-scrollbar-thumb:horizontal {
    min-width: 44px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d9ff62, #9dbf43);
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-thumb:active {
    background: #d9ff62;
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-corner {
    background: var(--droma-scroll-track);
  }

  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

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

  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    background: Canvas;
  }

  *::-webkit-scrollbar-thumb {
    background: ButtonText;
    border-color: Canvas;
  }

  *::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:active {
    background: Highlight;
  }
}