/* Low specificity keeps component-specific hidden scrollbars intact. */
@media not (forced-colors: active) {
  :root {
    --scrollbar-thumb: #9fbab0;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  :root[data-theme="dark"] {
    --scrollbar-thumb: #678a7e;
  }

  :where(*) {
    scrollbar-width: thin;
  }

  @supports not (scrollbar-width: thin) {
    :where(*)::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }

    :where(*)::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 999px;
    }

    :where(*)::-webkit-scrollbar-track,
    :where(*)::-webkit-scrollbar-corner {
      background: transparent;
    }
  }
}
