Can not change element webkit scrollbar using custom styles

[muboshers]

i will try to change this style but i can not change if i delete

.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) {
  scrollbar-width: var(--g-scrollbar-width);
  scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
}
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar)::-webkit-scrollbar,
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) *::-webkit-scrollbar {
  width: var(--g-scrollbar-width);
  height: var(--g-scrollbar-width);
  background: var(--g-color-scroll-track);
}
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar)::-webkit-scrollbar-track,
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) *::-webkit-scrollbar-track {
  background: var(--g-color-scroll-track);
}
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar)::-webkit-scrollbar-corner,
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) *::-webkit-scrollbar-corner {
  background: var(--g-color-scroll-corner);
}
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar)::-webkit-scrollbar-thumb,
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) *::-webkit-scrollbar-thumb {
  background: var(--g-color-scroll-handle);
}
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar)::-webkit-scrollbar-thumb:hover,
.g-root:not(.g-root_mobile):not(.g-root_native-scrollbar) *::-webkit-scrollbar-thumb:hover {
  background: var(--g-color-scroll-handle-hover);
}

this code from node modules then webkit scrollbar style update how i fix this issue