/* MARK: SCROLLING
*/

@layer scrolling {
  :root {
    scroll-behavior: smooth;
  }

  /* Target elements, not :root{} */
  /* https://codeconvey.com/custom-scrollbar-css-for-all-browsers/ */
  nav details section,
  main article ul[aria-hidden="true"] + ul,
  aside form fieldset {
    scrollbar-width: thin;
    scrollbar-color: var(--fg-accent) transparent;

    transition: scrollbar-color 0.5s ease;

    &:not(:hover) {
      scrollbar-color: transparent transparent;
    }
  }

  main article ul:last-of-type {
    overflow-x: auto;
    scroll-snap-type: y mandatory;

    > * {
      grid-template-columns: auto;
      scroll-snap-align: start;
    }
  }

  /* https://x.com/argyleink/status/1927220175385866387 */
  textarea {
    scrollbar-width: thin;
  }
}