/* Served as static CSS so Tailwind/Lightning CSS does not strip webkit scrollbar rules. */
html,
body,
.itemix-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, #c4c4cc) var(--scrollbar-track, transparent);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.itemix-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size, 6px);
  height: var(--scrollbar-size, 6px);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.itemix-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track, transparent);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.itemix-scroll::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb, #c4c4cc);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.itemix-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover, #a8a8b3);
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
.itemix-scroll::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:single-button,
html::-webkit-scrollbar-button:double-button,
body::-webkit-scrollbar-button:single-button,
body::-webkit-scrollbar-button:double-button,
.itemix-scroll::-webkit-scrollbar-button:single-button,
.itemix-scroll::-webkit-scrollbar-button:double-button {
  display: none;
  width: 0;
  height: 0;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.itemix-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

.itemix-scroll-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.itemix-scroll-hidden::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}