/**
 * Slash search input appearance
 * When the user types "/" to open the toolbox, the contenteditable
 * transforms to look like a search input.
 *
 * The element is inline-level so that the ::after pseudo-element (placeholder
 * text) renders on the same line as the "/" character and any typed query —
 * not on a new line below it (which happens with the default block display).
 *
 * It must be `inline-block`, NOT `inline-flex`: this element is the block's
 * contenteditable, and a flex container establishes no inline formatting
 * context. With no line box of its own, an EMPTY editable (the + button path
 * opens the search with no "/" typed) leaves the engine nothing to size the
 * caret from, so it falls back to the containing block's box — the caret was
 * painted 38px tall against a 28px pill, starting at the pill's left border
 * instead of inside its padding. As an inline-block the pill has its own line
 * box, so the caret always matches the input's own text line.
 * Vertical centering comes from that line box (the block's line-height), which
 * is what `align-items: center` was doing for the flex items.
 */
[data-blok-slash-search],
[data-blok-slash-search]:focus-visible {
  @apply bg-search-input-bg rounded-[6px] transition-colors duration-150 w-fit whitespace-nowrap px-2 py-[2px] mt-[9px];
  display: inline-block;
}

[data-blok-table-cell] [data-blok-slash-search],
[data-blok-table-cell] [data-blok-slash-search]:focus-visible {
  @apply rounded-[6px];
}

[data-blok-slash-search]::after {
  content: attr(data-blok-slash-search);
  @apply text-gray-text font-medium pointer-events-none;
}

/* Suppress the default paragraph empty-state ::before placeholder */
[data-blok-slash-search]::before {
  content: none !important;
}

/**
 * Popover items scrollbar — custom-drawn, identical on every platform.
 *
 * Native scrollbars cannot be normalized across engines: Chromium honors a
 * styled 4px `::-webkit-scrollbar` (classic, space-taking); WebKit ignores
 * `scrollbar-gutter: both-edges`, so it never mirrors the left lane; Firefox
 * cannot size a scrollbar to an exact pixel; and macOS/overlay-scrollbar
 * settings make `scrollbar-gutter` a no-op that reserves nothing. Measured
 * live, the same list reserved 8px (Chromium), 4px (WebKit) and 0px (Firefox).
 *
 * So the native scrollbar is hidden in EVERY engine and Blok draws its own
 * thumb (`[data-blok-popover-scrollbar]`, sized and positioned in JS from the
 * scroll metrics — see popover-abstract `updateScrollbar`). The 6px content
 * indent comes entirely from the container padding (px-1.5); the 4px thumb is
 * an overlay in the container's right padding zone, 1px from the popover edge,
 * leaving a 1px gap to the content. Because it is an overlay, nothing reflows
 * when it appears — the geometry and the auto-hide behavior are byte-identical
 * on Chromium, WebKit, Firefox, desktop and mobile.
 */
[data-blok-popover-items] {
  scrollbar-width: none; /* Firefox / standard: hide the native scrollbar */
}
[data-blok-popover-items]::-webkit-scrollbar {
  display: none; /* Chromium / WebKit: hide the native scrollbar */
}

/* The custom thumb. Transparent at rest — revealed while the popover is
   hovered, while the list is actively scrolling ([data-blok-scrolling] is
   stamped by the popover on scroll, so keyboard scrolling reveals it too), or
   while being dragged. */
[data-blok-popover-scrollbar] {
  position: absolute;
  top: 0;
  right: var(--blok-space-0-25);
  width: var(--blok-space-1);
  border-radius: var(--blok-space-1);
  background: var(--blok-popover-border);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: auto;
  cursor: default;
}
[data-blok-popover-container]:hover [data-blok-popover-scrollbar],
[data-blok-scrolling] ~ [data-blok-popover-scrollbar],
[data-blok-popover-scrollbar][data-blok-dragging] {
  opacity: 1;
}
[data-blok-popover-scrollbar]:hover,
[data-blok-popover-scrollbar][data-blok-dragging] {
  background: var(--blok-gray-text);
}