@zohodesk/components/lib/common/customscroll.module.css

In this Package, we Provide Some Basic Components to Build Web App

.scroll {
  /*  Variable:Ignore  */
  --zd-scroll-width: 12px;
  /*  Variable:Ignore  */
  --zd-scroll-height: 12px;
  --zd-scroll-bg: var(--zdt_customscroll_default_bg);
  --zd-scroll-corner-bg: transparent;
  --zd-scroll-thump: var(--zdt_customscroll_thump_bg);
  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
  --zd-scroll-border: var(--zdt_customscroll_border);
}

.scroll[data-scroll-palette='dark'],
.scroll [data-scroll-palette='dark'] {
  --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
  --zd-scroll-thump: var(--zdt_customscroll_thump_dark_bg);
  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
  --zd-scroll-border: var(--zdt_customscroll_dark_border);
}

.scroll,
.scroll * {
  /* css:theme-validation:ignore */
  scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
  scrollbar-width: thin;
  /* css:theme-validation:ignore */
  -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
  /* css:theme-validation:ignore */
  -ms-scrollbar-face-color: var(--zd-scroll-thump);
}

.scroll::-webkit-scrollbar,
.scroll ::-webkit-scrollbar {
  /* css:theme-validation:ignore */
}

.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
  background: var(--zd-scroll-corner-bg);
}

.scroll::-webkit-scrollbar:hover,
.scroll ::-webkit-scrollbar:hover {
  /* css:theme-validation:ignore */
}

.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
  background: var(--zd-scroll-bg);
}

.scroll::-webkit-scrollbar:horizontal,
.scroll ::-webkit-scrollbar:horizontal {
  height: var(--zd-scroll-height);
}

.scroll::-webkit-scrollbar:vertical,
.scroll ::-webkit-scrollbar:vertical {
  width: var(--zd-scroll-width);
}

.scroll::-webkit-scrollbar-button,
.scroll ::-webkit-scrollbar-button {
  display: none;
  width: 0 ;
  height: 0 ;
}

[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

[dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}

.scroll::-webkit-scrollbar-track:vertical:hover,
.scroll ::-webkit-scrollbar-track:vertical:hover {
  /* css:theme-validation:ignore */
}

.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
  border-color: var(--zd-scroll-border);
}

.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.scroll::-webkit-scrollbar-track:horizontal:hover,
.scroll ::-webkit-scrollbar-track:horizontal:hover {
  /* css:theme-validation:ignore */
}

.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
  border-color: var(--zd-scroll-border);
}

.scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
  background: inherit;
}

.scroll::-webkit-scrollbar-thumb,
.scroll ::-webkit-scrollbar-thumb {
  /* css:theme-validation:ignore */
  /* display: none; */
}

.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--zd-scroll-thump);
  background-clip: padding-box;
  border: 3px solid transparent;
}

.scroll::-webkit-scrollbar-thumb:hover,
.scroll ::-webkit-scrollbar-thumb:hover {
  /* css:theme-validation:ignore */
}

.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
  background: var(--zd-scroll-thump-hoverbg);
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* .scroll:hover > ::-webkit-scrollbar-thumb,
.scroll *:hover > ::-webkit-scrollbar-thumb {
  display: block;
} */
.scroll::-webkit-scrollbar-corner,
.scroll ::-webkit-scrollbar-corner {
  /* css:theme-validation:ignore */
}
.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
  background: var(--zd-scroll-corner-bg);
}

.scroll::-webkit-resizer, .scroll ::-webkit-resizer {
  background: inherit;
}