html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--backgroundColor);
}

::-webkit-scrollbar {
  width: var(--scrollbar-width, 8px);
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #b2b2b2;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

::-webkit-scrollbar-thumb:active {
  background-color: #a0a0a0;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}

.blur10 {
  backdrop-filter: blur(10px);
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--dividerColor);
  margin-top: 12px;
  margin-bottom: 12px;
}

.shadow {
  box-shadow: var(--shadow, var(--shadowColor) 2px 2px 8px);
}

.background-color {
  background: var(--backgroundColor);
}

.backdrop-color {
  background: var(--backdropColor, var(--backgroundColor));
}

.list-behavior {
  cursor: pointer;
}


.list-behavior:hover {
  background-color: var(--listHoverColor);
}

.list-behavior:active {
  background-color: var(--listActiveColor);
}

.list-behavior[data-selected=true] {
  background-color: var(--listActiveColor);
}
