.tabber {
	&__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;
		color: var( --color-base, #202122 );
		font-weight: 700;
		white-space: nowrap;

		&,
		&: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 {
			@media ( hover: hover ) {
				color: var( --color-progressive--active, #2a4b8d );
			}
		}

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

	&__section {
		display: grid;
		overflow: hidden;
		block-size: 100%;
		grid-auto-columns: 100%;
		grid-auto-flow: column;
		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;
		}
	}
}

// Set tabber height to the height of first tabpanel by
// setting subsequent tabpanels to have 0 height
.client-js {
	.tabber {
		&__tabs {
			scrollbar-width: none;

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

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

// Basic nojs support
.client-nojs {
	.tabber__panel {
		scroll-padding-top: 3rem;
		height: auto;
	}
}