:root {
    --pm-scrollbar-size: 9px;
    --pm-scrollbar-track: rgba(148, 163, 184, 0.14);
    --pm-scrollbar-thumb: rgba(100, 116, 139, 0.78);
    --pm-scrollbar-thumb-hover: rgba(129, 140, 248, 0.82);
    --pm-scrollbar-thumb-active: rgba(165, 180, 252, 0.92);
}

html.dark {
    --pm-scrollbar-track: rgba(148, 163, 184, 0.12);
    --pm-scrollbar-thumb: rgba(148, 163, 184, 0.56);
    --pm-scrollbar-thumb-hover: rgba(129, 140, 248, 0.78);
    --pm-scrollbar-thumb-active: rgba(165, 180, 252, 0.9);
}

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

*::-webkit-scrollbar {
    width: var(--pm-scrollbar-size);
    height: var(--pm-scrollbar-size);
}

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

*::-webkit-scrollbar-thumb {
    background-color: var(--pm-scrollbar-thumb);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

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

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

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

/* RTL context menu: the library renders the menu inside a dir="auto" host wrapper,
   which resolves to LTR whenever the first menu label starts with an emoji icon
   (the first strong character). That laid the icon out on the LEFT and left-aligned
   the Arabic text. Force RTL so the flex item places the icon on the trailing
   (right) side and the label right-aligns. */
html[dir="rtl"] .mhd-context-menu {
    direction: rtl;
    text-align: right;
}