/**
 * Critial rendering styles
 *
 * Since ext.tabberNeue is loaded a while after page load,
 * inline styles are needed to avoid potential layout shifts.
 * This should be kept as small as possible.
 */
.tabber {
	position: relative;
	overflow: hidden;

	&__header {
		box-shadow: inset 0 -1px 0 0 var( --border-color-base, #a2a9b1 );

		&__prev,
		&__next {
			display: none;
		}
	}

	&__tabs {
		display: flex;
		overflow: auto hidden;
	}

	&__tab {
		padding: 0.5em 0.75em;
		font-weight: bold;
		white-space: nowrap;

		&,
		&:hover,
		&:active,
		&:focus {
			text-decoration: none;
		}

		/* stylelint-disable-next-line no-descending-specificity */
		&,
		&:visited {
			color: var( --color-base, #202122 );
		}

		&:hover {
			@media ( hover: hover ) {
				color: var( --color-progressive--hover, #447ff5 );
				box-shadow: inset 0 -2px 0 0 var( --box-shadow-color-progressive-selected--hover, #447ff5 );
			}
		}

		&:active {
			color: var( --color-progressive--active, #2a4b8d );
		}
	}

	&__section {
		display: grid;
		grid-auto-columns: 100%;
		grid-auto-flow: column;
		block-size: 100%;
		overflow: hidden;
		scroll-snap-type: x mandatory;
	}

	&__panel {
		height: max-content;
		overflow-x: auto;
		scroll-snap-align: start;

		// Hide edit buttons for non-transclusion tabs since they don't work
		/* stylelint-disable-next-line selector-class-pattern */
		&:not( [ data-mw-tabber-page-title ] ) .mw-editsection {
			display: none;
		}
	}
}

// Wrap mode: tabs flow onto multiple rows instead of a scrollable row.
// Server-rendered class, so this lives in critical CSS to avoid layout shift.
// Higher specificity than `.tabber__tabs { overflow: auto hidden }` above, so
// it wins without !important. Prev/next arrows and edge masks are driven by
// `--prev/next-visible`, which never get set when there is no horizontal
// overflow, so they stay hidden automatically.
.tabber--wrap .tabber__tabs {
	flex-wrap: wrap;
	overflow: visible;
}

// Basic nojs support
/* stylelint-disable-next-line selector-class-pattern */
.client-nojs {
	.tabber__panel {
		height: auto;
		scroll-padding-top: 3rem;
	}
}

// Set tabber height to the height of first tabpanel by
// setting subsequent tabpanels to have 0 height
/* stylelint-disable-next-line selector-class-pattern */
.client-js {
	.tabber {
		&__tabs {
			scrollbar-width: none;

			&::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
		}

		&--init {
			.tabber__panel ~ .tabber__panel {
				height: 0;
			}
		}
	}
}
