.tabber {
	&__header {
		position: relative;
		display: flex;
		/* defend against <section> needing 100% */
		flex-shrink: 0;
		flex-direction: column;
		/* fixes cross browser quarks */
		min-block-size: fit-content;
		box-shadow: inset 0 -1px 0 0 var( --border-color-base, #a2a9b1 );

		button {
			/* Remove all default button styles */
			all: unset;
		}

		/* additional specificity needed after reset button styles */
		& &__prev {
			left: 0;
		}

		& &__next {
			right: 0;
		}

		& &__prev,
		& &__next {
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: 1;
			display: none; // Required as all:unset also unset display:none
			width: 20px;
			cursor: pointer;
			border-radius: 4px;

			&::after {
				display: block;
				width: inherit;
				height: 100%;
				pointer-events: none; // Required to avoid aria-hidden error message
				content: '';
				background-repeat: no-repeat;
				background-position: center;
				background-size: 14px;
			}
		}

		&--prev-visible .tabber__tabs {
			-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20% );
			mask-image: linear-gradient( 90deg, transparent, #000 20% );
		}

		&--next-visible .tabber__tabs {
			-webkit-mask-image: linear-gradient( 90deg, #000 80%, transparent );
			mask-image: linear-gradient( 90deg, #000 80%, transparent );
		}

		&--prev-visible.tabber__header--next-visible .tabber__tabs {
			-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
			mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
		}

		&--prev-visible .tabber__header__prev,
		&--next-visible .tabber__header__next {
			display: block;
		}
	}

	&__tabs {
		position: relative;

		// JS appends .tabber__indicator at construction; defer the active-tab
		// visual to it instead of the per-tab box-shadow. The selector still
		// applies for everything else (color, etc.), so wiki overrides of
		// non-shadow properties continue to work. Wikis that previously
		// overrode the box-shadow color should switch to styling
		// .tabber__indicator { background: ... }.
		&:has( > .tabber__indicator ) > .tabber__tab[ aria-selected='true' ] {
			box-shadow: none;
		}
	}

	&__tab {
		// Skins such as Vector set a border-radius to <a> elements,
		// so we need to override it here.
		border-radius: 0;

		&[ aria-selected='true' ] {
			box-shadow: 0 -2px 0 var( --color-progressive, #36c ) inset;
		}

		&[ aria-selected='true' ],
		&[ aria-selected='true' ]:visited {
			color: var( --color-progressive, #36c );
		}
	}

	&__indicator {
		position: absolute;
		bottom: 0;
		height: 2px;
		pointer-events: none;
		background: var( --color-progressive, #36c );
	}

	&__panel {
		&--loading {
			/* stylelint-disable no-descending-specificity */
			.tabber__transclusion {
				opacity: 0.1;

				a {
					color: transparent;
				}

				a,
				&::before,
				&::after {
					display: block;
					height: 0.5em;
					margin-top: 1em;
					background: #000;
					background: linear-gradient( to right, var( --color-base, #202122 ) 8%, var( --color-subtle, #54595d ) 18%, var( --color-base, #202122 ) 33% );
					border-radius: 40px;
					animation-name: skeletonload;
					animation-duration: 3s;
					animation-timing-function: linear;
					animation-iteration-count: infinite;
					animation-fill-mode: forwards;
				}

				&::before,
				&::after {
					content: '';
				}

				&::after {
					width: 60%;
				}
			}
			/* stylelint-enable no-descending-specificity */
		}
	}
}

// Animations
.tabber-animations-ready {
	.tabber {
		&__header {
			scroll-behavior: smooth;
		}

		&__tabs {
			@media ( min-width: 720px ) {
				scroll-behavior: smooth;
			}
		}

		// scroll-snap-type tracks the snap target's painted position including
		// transforms — without suspending it, scrollLeft follows the panel's
		// translateX and exposes adjacent panels.
		&__section:has( > .tabber__panel--entering-from-left ),
		&__section:has( > .tabber__panel--entering-from-right ) {
			scroll-snap-type: none;
		}

		&__panel--entering-from-right {
			animation: tabber-panel-enter-from-right 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
		}

		&__panel--entering-from-left {
			animation: tabber-panel-enter-from-left 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
		}

		&__indicator {
			transition: transform 150ms cubic-bezier( 0.4, 0, 0.2, 1 ), width 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
		}
	}
}

@keyframes tabber-panel-enter-from-right {
	from {
		opacity: 0;
		transform: translateX( 48px );
	}

	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

@keyframes tabber-panel-enter-from-left {
	from {
		opacity: 0;
		transform: translateX( -48px );
	}

	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

// View Transitions path. Fallback `--entering-*` animation above applies when
// document.startViewTransition is unavailable.
//
// These rules sit at global scope rather than inside `.tabber-animations-ready`
// because ::view-transition-* pseudo-elements live under the document root and
// cannot be scoped through an ancestor class. The animation is instead gated
// behaviorally by createViewTransitionWrapper.canUse(), which refuses to call
// startViewTransition when `.tabber-animations-ready` is absent.
//
// All four pseudo-element levels (group, image-pair, old, new) carry the
// duration/easing — UA defaults at each level otherwise run to 250ms in
// parallel and lengthen the perceived end time.
::view-transition-group( tabber-section-forward ),
::view-transition-group( tabber-section-backward ),
::view-transition-image-pair( tabber-section-forward ),
::view-transition-image-pair( tabber-section-backward ),
::view-transition-old( tabber-section-forward ),
::view-transition-old( tabber-section-backward ),
::view-transition-new( tabber-section-forward ),
::view-transition-new( tabber-section-backward ) {
	animation-duration: 150ms;
	animation-timing-function: cubic-bezier( 0.4, 0, 0.2, 1 );
	animation-fill-mode: both;
}

::view-transition-old( tabber-section-forward ) {
	animation-name: tabber-vt-slide-out-left;
}

::view-transition-new( tabber-section-forward ) {
	animation-name: tabber-vt-slide-in-right;
}

::view-transition-old( tabber-section-backward ) {
	animation-name: tabber-vt-slide-out-right;
}

::view-transition-new( tabber-section-backward ) {
	animation-name: tabber-vt-slide-in-left;
}

@keyframes tabber-vt-slide-out-left {
	from {
		opacity: 1;
		transform: translateX( 0 );
	}

	to {
		opacity: 0;
		transform: translateX( -48px );
	}
}

@keyframes tabber-vt-slide-in-right {
	from {
		opacity: 0;
		transform: translateX( 48px );
	}

	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

@keyframes tabber-vt-slide-out-right {
	from {
		opacity: 1;
		transform: translateX( 0 );
	}

	to {
		opacity: 0;
		transform: translateX( 48px );
	}
}

@keyframes tabber-vt-slide-in-left {
	from {
		opacity: 0;
		transform: translateX( -48px );
	}

	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

@media ( hover: none ) {
	// Need extra specificity to override
	.tabber {
		.tabber__header {
			&__prev,
			&__next {
				pointer-events: none; // Disable arrow button

				&::after {
					background-image: none; // Remove arrow icon
				}
			}
		}
	}
}

@media ( hover: hover ) {
	.tabber {
		&__header {
			&__prev,
			&__next {
				&:hover {
					background-color: var( --background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ) );
				}

				&:active {
					background-color: var( --background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ) );
				}
			}
		}
	}
}

@keyframes skeletonload {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 100em 0;
	}
}

@media print {
	.tabber__header {
		display: none;
	}

	/* Show all tab contents */
	.tabber__section {
		grid-auto-flow: row;
		gap: 1em;
		/* stylelint-disable-next-line declaration-no-important */
		height: auto !important;
	}

	/* Show tab header */
	.tabber__panel::before {
		display: block;
		margin: 1em 0;
		font-weight: bold;
		content: attr( data-mw-tabber-title );
	}
}
