.u-webkitScrollbar::-webkit-scrollbar {
  width: map-get($webkit-scrollbar, width);
  height: map-get($webkit-scrollbar, width);
}

.u-webkitScrollbar::-webkit-scrollbar-thumb:vertical,
.u-webkitScrollbar::-webkit-scrollbar-thumb:horizontal {
  background-color: map-get($webkit-scrollbar, bg);
}

.u-webkitScrollbar--white::-webkit-scrollbar-thumb:vertical,
.u-webkitScrollbar--white::-webkit-scrollbar-thumb:horizontal {
  background-color: map-get($webkit-scrollbar, white);
}

.u-webkitScrollbar::-webkit-scrollbar-thumb:vertical {
  margin: map-get($webkit-scrollbar, margin);
  -webkit-border-radius: map-get($webkit-scrollbar, width);
}

.u-webkitScrollbar::-webkit-scrollbar-thumb:horizontal {
  margin: 0;
  -webkit-border-radius: map-get($webkit-scrollbar, width) /2;
}

.u-webkitScrollbar::-webkit-scrollbar-button:start:decrement,
.u-webkitScrollbar::-webkit-scrollbar-button:end:increment {
  height: map-get($webkit-scrollbar, width);
  display: block;
}

.u-webkitScrollbar--hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.u-webkitScrollbar--hidden::-webkit-scrollbar {
  width: 0;
  display: none;
}