/* 
    Note: It does not seem to be possible to include these
    styles in React inline, so we are defining them here.
*/

.light-scrollbar {
  scrollbar-color: var(--chakra-colors-gray-400) transparent;
}

.light-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--chakra-colors-gray-400);
  border-radius: 0.5rem;
  background-clip: content-box;
  border: 3px solid transparent;
}

.light-scrollbar::-webkit-scrollbar {
  background: transparent;
  overflow: auto;
}

.light-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
  color: transparent;
  display: none;
}

.scrollbar-left {
  direction: rtl;
}

.scrollbar-left > div {
  direction: ltr;
}

.dark-scrollbar {
  scrollbar-color: var(--chakra-colors-gray-600) transparent;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--chakra-colors-gray-600);
  border-radius: 0.5rem;
  background-clip: content-box;
  border: 3px solid transparent;
}

.dark-scrollbar::-webkit-scrollbar {
  background: transparent;
  overflow: auto;
}

.dark-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
  color: transparent;
  display: none;
}

.darker-scrollbar {
  scrollbar-color: var(--chakra-colors-gray-700) transparent;
}

.darker-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--chakra-colors-gray-700);
  border-radius: 0.5rem;
  background-clip: content-box;
  border: 3px solid transparent;
}

.darker-scrollbar::-webkit-scrollbar {
  background: transparent;
  overflow: auto;
}

.darker-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
  color: transparent;
  display: none;
}
