/**
 * Readable list tables.
 *
 * The per-column widths are added as an inline stylesheet on top of this file,
 * because they are filterable.
 */

/* The shadow has to live on a wrapper around the scroll container: a
   pseudo-element on the container itself is positioned against the padding box
   and would scroll away with the content. */
.rlt-scroll-outer {
	position: relative;
	/* Own stacking context, so the z-index on the shadow below is resolved
	   against the table's own internals and cannot leak out over the rest of
	   the admin. */
	z-index: 0;
	/* The table used to carry `clear: both` and `width: 100%` itself via
	   .widefat; moving it into a wrapper handed both jobs over. Without them an
	   overflow box may sit beside a floated filter or view-link list, ending up
	   narrow and pushed to the right. */
	clear: both;
	width: 100%;
}

/* "There is more to the right." Fades out once you reach that end. The matching
   left-hand signal is the divider on the pinned title column below: a shadow on
   the container's left edge would just darken the pinned columns, since those
   sit on top of it. */
.rlt-scroll-outer::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 24px;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0.18 ) );
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
	pointer-events: none;
	/* Above the positioned bits inside the table. Core gives .check-column
	   `position: relative` and its checkbox `z-index: 1`, which would otherwise
	   punch a hole straight through the shadow. */
	z-index: 2;
}

.rlt-scroll-outer.has-more-right::after {
	opacity: 1;
}

.rlt-scroll {
	overflow-x: auto;
	width: 100%;
	box-sizing: border-box;
	/* The sticky bar below is the only scrollbar. Without this there are two of
	   them as soon as the bottom of the table comes into view: the sticky one
	   settles into its normal-flow slot right where this one sits. Hiding it
	   costs nothing -- the bar occupies the same strip -- and scrolling by
	   trackpad, keyboard and the bar all still work. */
	scrollbar-width: none;
	/* Suppress the elastic overscroll at both ends. The left border below sits on
	   this container rather than on the table, so a rubber-band stretch pulls the
	   content away from a border that stays put, opening a gap that snaps shut
	   again. `none` rather than `contain`, because `contain` only stops the
	   scroll chaining and keeps the bounce. It also stops a horizontal swipe in
	   the table from triggering browser back/forward navigation. */
	overscroll-behavior-x: none;
	/* .widefat's left border belongs to the table and so scrolls out of view
	   with it, leaving the box open on that side. Hand it to the scroll
	   container, which stays put, and take it off the table.

	   The right border deliberately stays on the table. Decorative
	   pseudo-elements inside the cells -- a Yoast tooltip arrow, an icon -- can
	   sit a few pixels past the last column and extend the scrollable area, and
	   a border pinned to the container would then leave a visible gap between
	   itself and the table at the far end of the scroll. Keeping it on the table
	   means it is flush with the content whatever any other plugin does. While
	   scrolling it is off-screen, which is what the right-hand shadow covers. */
	border-left: 1px solid #c3c4c7;
}

.rlt-scroll::-webkit-scrollbar {
	display: none;
}

.rlt-scroll .wp-list-table {
	border-left: 0;
}

/* A scrollbar of our own, pinned to the bottom of the viewport for as long as
   any part of the table is on screen, so it can be reached from any row instead
   of only by travelling to the bottom of a long table.

   Built from real elements rather than a styled native scrollbar. macOS fades
   overlay scrollbars out until you scroll -- which is precisely the problem
   this exists to solve -- and `::-webkit-scrollbar` does not exist in Firefox,
   so neither platform could be relied on to keep one on screen. */
.rlt-scrollbar {
	position: sticky;
	bottom: 0;
	z-index: 4;
	height: 16px;
	background: #f0f0f1;
	border-top: 1px solid #c3c4c7;
	/* The thumb is positioned against this. */
	overflow: hidden;
}

.rlt-scrollbar-thumb {
	position: absolute;
	top: 3px;
	height: 10px;
	min-width: 24px;
	background: #50575e;
	border-radius: 5px;
	cursor: grab;
}

.rlt-scrollbar-thumb:hover {
	background: #1d2327;
}

.rlt-scrollbar.is-dragging .rlt-scrollbar-thumb {
	background: #1d2327;
	cursor: grabbing;
}

/* Pin the checkbox and title columns, so which post a row is stays readable
   however far right you scroll. Scoped above the point where core switches the
   list table to its stacked mobile layout. */
@media screen and ( min-width: 783px ) {

	.rlt-scroll-outer.is-sticky .fixed .check-column,
	.rlt-scroll-outer.is-sticky .fixed .column-title {
		position: sticky;
		/* Above the scrolling cells, and above the checkbox's own z-index: 1
		   from core. */
		z-index: 3;
		/* The stripe sits on the row, so the pinned cells need to carry an
		   opaque background of their own or the cells passing underneath show
		   straight through. */
		background-color: #fff;
	}

	.rlt-scroll-outer.is-sticky .fixed .check-column {
		left: 0;
	}

	/* Offset measured at runtime: core specifies the checkbox column as 2.2em,
	   2.3em and 2.5em in different rules, so reading the rendered width is the
	   only reliable way to butt the title up against it. */
	.rlt-scroll-outer.is-sticky .fixed .column-title {
		left: var( --rlt-cb-width, 31px );
	}

	.rlt-scroll-outer.is-sticky .striped > tbody > :nth-child( odd ) .check-column,
	.rlt-scroll-outer.is-sticky .striped > tbody > :nth-child( odd ) .column-title {
		background-color: #f6f7f7;
	}

	/* Divider showing that columns are sliding under the pinned ones.

	   `left: 100%` puts it just outside the pinned cell, over the scrolling
	   content. Inside the cell (`right: 0`) it would sit on top of that cell's
	   own opaque background -- needed for the pinning -- so it would read as a
	   solid band with nothing visible behind it, rather than a shadow. */
	.rlt-scroll-outer.is-sticky .fixed .column-title::after {
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		bottom: 0;
		width: 16px;
		background: linear-gradient( to right, rgba( 0, 0, 0, 0.10 ), rgba( 0, 0, 0, 0 ) );
		opacity: 0;
		transition: opacity 0.15s ease-in-out;
		pointer-events: none;
	}

	.rlt-scroll-outer.is-sticky.has-more-left .fixed .column-title::after {
		opacity: 1;
	}

	/* Quick Edit and Bulk Edit render into a cell that spans every column, so on
	   a wide table their form is as wide as the table -- its fieldsets are
	   percentages of that -- and it scrolls out of view along with the row it
	   replaced. Open Quick Edit while scrolled right and the form sits entirely
	   off-screen. Pin the wrapper to the scrollport and give it the scrollport's
	   width, so the form stays put and keeps a sane column layout. Deliberately
	   not scoped to .is-sticky: this is broken with or without pinned columns. */
	.rlt-scroll .inline-edit-row .inline-edit-wrapper {
		position: sticky;
		left: 0;
		box-sizing: border-box;
		width: var( --rlt-viewport, 100% );
	}
}