/* OKKwork — умные скроллбары: скрыты по умолчанию, видны при наведении/фокусе */

:root {
  --okkwork-scrollbar-track: rgba(220, 231, 242, 0.98);
  --okkwork-scrollbar-thumb: #0658a2;
  --okkwork-scrollbar-size: 8px;
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html:hover,
body:hover,
*:hover,
*:focus-within {
  scrollbar-color: var(--okkwork-scrollbar-thumb) var(--okkwork-scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--okkwork-scrollbar-size);
  height: var(--okkwork-scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html:hover::-webkit-scrollbar-track,
body:hover::-webkit-scrollbar-track,
*:hover::-webkit-scrollbar-track,
*:focus-within::-webkit-scrollbar-track {
  background: var(--okkwork-scrollbar-track);
}

html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
  background: var(--okkwork-scrollbar-thumb);
  border-color: var(--okkwork-scrollbar-track);
}

.okkwork-scrollbar-hidden,
.okkwork-scrollbar-hidden * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.okkwork-scrollbar-hidden::-webkit-scrollbar,
.okkwork-scrollbar-hidden *::-webkit-scrollbar {
  display: none;
}