@use "@sass-palette/hope-config";

:root {
  scrollbar-width: thin;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  @media (min-width: 1920px) {
    --content-width: var(--wide-content-width);
  }
}

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

::-webkit-scrollbar-track-piece {
  border-radius: 6px;
  background: rgb(0 0 0 / 10%);
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: var(--vp-c-accent-bg);

  &:active {
    background: var(--vp-c-accent-hover);
  }
}

.hide-in-mobile {
  @media (max-width: hope-config.$tablet) {
    display: none !important;
  }
}

.hide-in-pad {
  @media (max-width: hope-config.$pad) {
    display: none !important;
  }
}