@layer exl-scrollbars {
  @media (forced-colors: none) {
    :root {
      --exl-scrollbar-thumb: color-mix(in srgb, var(--exl-fg-muted, #64748b) 75%, transparent);
      --exl-scrollbar-thumb-hover: color-mix(in srgb, var(--exl-fg-muted, #64748b) 95%, transparent);
    }

    /* Keep native scrolling and a generous drag target around the narrow thumb. */
    @supports selector(::-webkit-scrollbar) {
      *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background: transparent;
      }

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

      *::-webkit-scrollbar-thumb {
        min-width: 32px;
        min-height: 32px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: var(--exl-scrollbar-thumb);
        background-clip: padding-box;
      }

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

      *::-webkit-scrollbar-thumb:active {
        background-color: var(--exl-fg-muted, #64748b);
      }

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

      @media (pointer: coarse) {
        *::-webkit-scrollbar {
          width: 14px;
          height: 14px;
        }
      }
    }

    /* Browsers without scrollbar pseudo-elements use their native thin variant. */
    @supports not selector(::-webkit-scrollbar) {
      * {
        scrollbar-width: thin;
        scrollbar-color: var(--exl-scrollbar-thumb) transparent;
      }
    }
  }
}