::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--fill-subtle);
  border: 4px solid;
  border-color: var(--field-enabled);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fill-secondary);
}

/* Removes the white square in the corner when an element has both vertical and horizontal scrollbars */
::-webkit-scrollbar-corner {
  background: transparent;
}

#nav-control-panel::-webkit-scrollbar-thumb {
  border-color: var(--surfaces-bg02);
}

.card::-webkit-scrollbar-thumb,
.card-nav::-webkit-scrollbar-thumb,
.hljs::-webkit-scrollbar-thumb {
  border-color: var(--surfaces-bg-card);
}

#page-components::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.container-fluid::-webkit-scrollbar-thumb {
  border-color: var(--right-side-bg);
}

/* Can't control thumb color so hover is turned off */
.ag-root ::-webkit-scrollbar {
  width: 4px;
}

.ag-root ::-webkit-scrollbar-thumb:hover {
  background: var(--fill-secondary);
  border: 4px solid;
  border-color: var(--fill-secondary);
}

.text::-webkit-scrollbar-thumb,
.hljs::-webkit-scrollbar-thumb {
  border-color: var(--right-side-bg);
}

.container-fluid > .grid-layout::-webkit-scrollbar-thumb {
  border-color: var(--right-side-bg);
}