mediawiki-extensions-TabberNeue/modules/ext.tabberNeue/ext.tabberNeue.less

.tabber {
	// Codex tokens aren't avaliable in older MW version
	--tabber-color-progressive: #36c;
	--tabber-color-progressive--hover: #447ff5;
	--tabber-color-progressive--active: #2a4b8d;
	--tabber-color-base: #202122;
	--tabber-color-subtle: #54595d;
	--tabber-background-color-button-quiet--hover: rgba( 0, 24, 73, 0.027 );
	--tabber-background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
	--tabber-border-color-base: #a2a9b1;
	--tabber-height-indicator: 2px;
	position: relative;
	display: flex;

	/* establish primary containing box */
	overflow: hidden;
	flex-direction: column;

	&__tabs {
		display: flex;
		overflow: auto hidden;
		scrollbar-width: none;

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

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

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

		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;
			z-index: 1;
			top: 0;
			bottom: 0;
			display: none;
			width: 20px;
			border-radius: 4px;
			cursor: pointer;

			&::after {
				position: absolute;
				top: 0;
				bottom: 0;
				width: inherit;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 14px;
				content: '';
			}
		}

		&--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;
		}
	}

	&__header,
	&__section {
		scrollbar-width: none;

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

	&__indicator {
		display: none;
		margin-top: ~'calc( var( --tabber-height-indicator ) * -1 )';
		background: var( --tabber-color-progressive );
		block-size: var( --tabber-height-indicator );
		inline-size: 0;

		&--visible {
			display: block;
		}
	}

	&__tab {
		padding: 0.5em 0.75em;
		color: var( --tabber-color );
		font-weight: bold;
		text-decoration: none;
		white-space: nowrap;

		&:visited {
			color: var( --tabber-color );
		}

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

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

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

	&__tabs--animate {
		.tabber__tab[ aria-selected='true' ] {
			box-shadow: none;
		}
	}

	&__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;
		}

		&--loading {
			.tabber__transclusion {
				opacity: 0.1;

				a {
					color: transparent;
				}

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

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

				&::after {
					width: 60%;
				}
			}
		}
	}
}

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

		&__indicator {
			transition: transform 250ms ease, width 250ms ease;
		}

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

@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 {
		&__tab {
			&:hover {
				color: var( --tabber-color-progressive--hover );
			}

			&:active {
				color: var( --tabber-color-progressive--active );
			}
		}

		&__header {
			&__prev,
			&__next {
				&:hover {
					background-color: var( --tabber-background-color-button-quiet--hover );
				}

				&:active {
					background-color: var( --tabber-background-color-button-quiet--active );
				}
			}
		}
	}
}

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

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