/* ==========================================================================
   Grasbloggen — shared ".scroll-x" horizontal-scroll affordance.

   Applied around every independently horizontally-scrollable table in the
   theme (spec-guide Snabbfakta, the compare table, the jamforelsetabell
   block) so all three share ONE fix instead of the same missing affordance
   being reimplemented per-component. Markup contract (see scroll-x.js):

     <div class="scroll-x-block">
       <div class="scroll-x-outer">
         <div class="… scroll-x" tabindex="0" role="region" aria-label="…">
           <table>…</table>
         </div>
       </div>
       <p class="scroll-x-hint" aria-hidden="true">Scrolla i sidled →</p>
     </div>

   scroll-x.js toggles `.is-overflowing` / `.is-at-end` on `.scroll-x-block`
   based on the actual scrollWidth/clientWidth of the `.scroll-x` element —
   the fade and the hint text only ever appear when the table genuinely
   overflows, never as decoration on a table that already fits.

   The `.scroll-x` element itself keeps whatever project already gives it
   its scrolling behavior (overflow-x:auto, tabindex, role, aria-label —
   see components.css .grasbloggen-table-scroll and compare.css
   .compare-table-container); this file only adds the fade mask + hint, so
   it doesn't fight with either of those existing rules.
   ========================================================================== */

.scroll-x-block {
	position: relative;
}

.scroll-x-outer {
	position: relative;
}

/* Right-edge fade mask — only visible while the table truly overflows AND
   hasn't been scrolled all the way to its end. Decorative: pointer-events
   none so it never blocks scrolling/clicks, and it never affects layout
   (position:absolute, no box in flow) so toggling it causes no shift. */
.scroll-x-outer::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2.5rem;
	background: linear-gradient(to right, transparent, var(--color-bg, #fff));
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}
.scroll-x-block.is-overflowing .scroll-x-outer::after {
	opacity: 1;
}
.scroll-x-block.is-overflowing.is-at-end .scroll-x-outer::after {
	opacity: 0;
}

/* Small mobile-only hint text. Height is reserved at <=600px at all times
   (whether or not the table currently overflows) so toggling the hint's
   opacity never shifts the layout beneath it — only the viewport-width
   media query itself changes the reserved space, which is an ordinary
   responsive reflow, not a content-driven shift. */
.scroll-x-hint {
	display: block;
	font-family: var(--font-mono, monospace);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-accent-dim, #4d6b57);
	height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 0;
	transition: opacity 150ms ease;
}
@media (max-width: 600px) {
	.scroll-x-hint {
		height: 1.4em;
		margin-top: 0.5em;
	}
	.scroll-x-block.is-overflowing .scroll-x-hint {
		opacity: 1;
	}
}

/* Keyboard-focus visibility on the scrollable region itself (belt-and-
   braces on top of whatever outline the component's own stylesheet sets). */
.scroll-x:focus-visible {
	outline: 2px solid var(--color-action, #2e7a3e);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.scroll-x-outer::after,
	.scroll-x-hint {
		transition: none;
	}
}