html {
  scroll-behavior: auto;

  /**
    * Enable smooth scrolling when users have prefers-reduced-motion disabled
    */
  @media screen and (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

body,
.menu-drawer__navigation,
.custom-scroll {
  @supports (scrollbar-face-color: var(--color-neutral-3)) {
    scrollbar-face-color: var(--color-neutral-3);
  }

  @supports (scrollbar-track-color: var(--color-neutral-5)) {
    scrollbar-track-color: var(--color-neutral-5);
  }

  @supports (scrollbar-color: var(--color-neutral-3) var(--color-neutral-5)) {
    scrollbar-color: var(--color-neutral-3) var(--color-neutral-5);
  }

  @supports (scrollbar-color: auto) {
    scrollbar-color: auto;
  }

  @supports (scrollbar-width: auto) {
    scrollbar-width: auto;
  }

  &::-webkit-scrollbar {
    width: var(--spacing__4px);
    height: var(--spacing__4px);
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-3);
    background-clip: var(--color-neutral-5);
  }

  &::-webkit-scrollbar-track {
    background-color: var(--color-neutral-5);
  }
}

html:has(body.overflow-hidden) {
  overflow: hidden;
}