@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * SCROLL AREA
 *
 * Styled scrollable container. Uses the native scrollbar (never substitutes
 * a fake one) and themes it via cross-browser properties so keyboard, touch,
 * and assistive-technology interactions stay intact.
 * ======================================== */

  .cinder-scroll-area {
    /* ScrollArea itself paints no background (the design thesis it shares
     * with a native scrollbar: it never opts the page out of its own
     * surface). `--_cinder-scroll-fade-color` therefore has no real value to
     * inherit from this component and defaults to `--cinder-surface` — the
     * library's most common ambient surface. Consumers placing ScrollArea
     * against a different surface (e.g. inside a `--cinder-surface-raised`
     * card) and using `scrollFadeVisible` should override it inline:
     * `style="--_cinder-scroll-fade-color: var(--cinder-surface-raised)"`,
     * the same documented escape hatch as `--_cinder-modal-close-ring`. */
    --_cinder-scroll-fade-color: var(--cinder-surface);

    display: block;
    min-block-size: 0;
    min-inline-size: 0;
    /* Contain scroll momentum so reaching the end of this region does not
   * bleed into an ancestor scroller (rubber-band on iOS, page-scroll on
   * desktop). Matches the modal / command-palette body convention. */
    overscroll-behavior: contain;

    /* Firefox scrollbar theming. */
    scrollbar-width: thin;
    scrollbar-color: var(--cinder-scrollbar-thumb) var(--cinder-scrollbar-track);
  }

  .cinder-scroll-area[data-cinder-direction='vertical'] {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .cinder-scroll-area[data-cinder-direction='horizontal'] {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .cinder-scroll-area[data-cinder-direction='both'] {
    overflow: auto;
  }

  .cinder-scroll-area[data-cinder-dragging],
  .cinder-scroll-area[data-cinder-dragging] * {
    user-select: none;
    -webkit-user-drag: none;
  }

  /* dragToScroll disables itself under prefers-reduced-motion (matches
     useReducedMotion() in the Svelte module) — the grab/grabbing affordance
     must not promise drag behavior it won't deliver. */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cinder-scroll-area[data-cinder-drag-to-scroll] {
      cursor: grab;
    }

    .cinder-scroll-area[data-cinder-dragging] {
      cursor: grabbing;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    :root:is([data-cinder-reduced-motion='false'], [data-reduced-motion='off'])
      .cinder-scroll-area[data-cinder-drag-to-scroll] {
      cursor: grab;
    }

    :root:is([data-cinder-reduced-motion='false'], [data-reduced-motion='off'])
      .cinder-scroll-area[data-cinder-dragging] {
      cursor: grabbing;
    }
  }

  /* Chromium / Safari scrollbar theming. */
  .cinder-scroll-area::-webkit-scrollbar {
    inline-size: var(--cinder-scrollbar-size);
    block-size: var(--cinder-scrollbar-size);
  }

  .cinder-scroll-area::-webkit-scrollbar-track {
    background: var(--cinder-scrollbar-track);
  }

  .cinder-scroll-area::-webkit-scrollbar-thumb {
    background: var(--cinder-scrollbar-thumb);
    border-radius: var(--cinder-radius-sm);
  }

  .cinder-scroll-area::-webkit-scrollbar-thumb:hover {
    background: var(--cinder-scrollbar-thumb-hover);
  }

  .cinder-scroll-area::-webkit-scrollbar-corner {
    background: var(--cinder-scrollbar-track);
  }

  /* Visible focus ring for keyboard scroll users. Matches the button focus
 * pattern: transparent outline as a forced-colors fallback, box-shadow rings
 * for offset + ring colors. */
  .cinder-scroll-area:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  /* Windows High Contrast Mode (forced-colors) ignores box-shadow and
 * overrides custom scrollbar paint. Map the focus ring and scrollbar parts
 * to system colors so keyboard users keep their affordances. */
  @media (forced-colors: active) {
    .cinder-scroll-area:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 3px;
      box-shadow: none;
    }

    .cinder-scroll-area::-webkit-scrollbar-track,
    .cinder-scroll-area::-webkit-scrollbar-corner {
      background: Canvas;
    }

    .cinder-scroll-area::-webkit-scrollbar-thumb {
      background: CanvasText;
    }

    .cinder-scroll-area::-webkit-scrollbar-thumb:hover {
      background: ButtonText;
    }
  }
}