/** * Barex scrollbar — unified Chrome + Firefox sizing. * Load after barex-theme-tokens.css and app CSS so overrides win. * Chrome ignores scrollbar-width when ::-webkit-scrollbar is set; keep both in sync via --barex-scrollbar-size. */ *, *::before, *::after { scrollbar-width: thin; scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track); } *::-webkit-scrollbar { width: var(--barex-scrollbar-size); height: var(--barex-scrollbar-size); } *::-webkit-scrollbar-track { background: var(--barex-scrollbar-track); } *::-webkit-scrollbar-thumb { background-color: var(--barex-scrollbar-thumb); border-radius: 999px; border: none; } *::-webkit-scrollbar-thumb:hover { background-color: var(--barex-scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: transparent; } /** * Page scrollbar on the left (RTL). * Chrome always draws the viewport scrollbar on the right, even for dir="rtl", * so the page scroll is moved onto , which does honor direction. * Desktop only: mobile keeps document scrolling so the URL bar can collapse. */ @media (min-width: 992px) { html { height: 100%; overflow: hidden; } body { height: 100%; overflow-x: hidden; overflow-y: auto; } .wrapper { height: auto; min-height: 100%; } } /* Intentional hide — keep both engines covered */ .barex-scrollbar-none, .barex-filter-fields, .barex-mobile-chips { scrollbar-width: none; -ms-overflow-style: none; } .barex-scrollbar-none::-webkit-scrollbar, .barex-filter-fields::-webkit-scrollbar, .barex-mobile-chips::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Override legacy theme widths (5px / 12px / 4px) */ .custom-scroll, .custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track); } .custom-scroll::-webkit-scrollbar, .custom-scrollbar::-webkit-scrollbar { -webkit-appearance: none; width: var(--barex-scrollbar-size); height: var(--barex-scrollbar-size); } .custom-scroll::-webkit-scrollbar:vertical, .custom-scrollbar::-webkit-scrollbar:vertical { width: var(--barex-scrollbar-size); } .custom-scroll::-webkit-scrollbar:horizontal, .custom-scrollbar::-webkit-scrollbar:horizontal { height: var(--barex-scrollbar-size); } .custom-scroll::-webkit-scrollbar-thumb, .custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--barex-scrollbar-thumb); border-radius: 999px; border: none; } .custom-scroll::-webkit-scrollbar-track, .custom-scrollbar::-webkit-scrollbar-track { background-color: var(--barex-scrollbar-track); border-radius: 999px; } .custom-scroll::-webkit-scrollbar-corner, .custom-scrollbar::-webkit-scrollbar-corner { background: transparent; } .choices__list--dropdown .choices__list, .choices__list { scrollbar-width: thin; scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track); } .choices__list--dropdown .choices__list::-webkit-scrollbar, .choices__list::-webkit-scrollbar { -webkit-appearance: none; width: var(--barex-scrollbar-size); height: var(--barex-scrollbar-size); } .choices__list--dropdown .choices__list::-webkit-scrollbar:vertical, .choices__list::-webkit-scrollbar:vertical { width: var(--barex-scrollbar-size); margin-right: 0; margin-left: 0; } .choices__list--dropdown .choices__list::-webkit-scrollbar:horizontal, .choices__list::-webkit-scrollbar:horizontal { height: var(--barex-scrollbar-size); } .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb, .choices__list::-webkit-scrollbar-thumb { background-color: var(--barex-scrollbar-thumb); border-radius: 999px; border: none; } .choices__list--dropdown .choices__list::-webkit-scrollbar-track, .choices__list::-webkit-scrollbar-track { background-color: var(--barex-scrollbar-track); border-radius: 999px; }