mediawiki-skins-Citizen/resources/skins.citizen.styles/skinning/interface-edit-section-links.less

/*
 * Citizen
 *
 * Module: mediawiki.skinning.interface-edit-section-links
 * Version: REL1_39
 *
 * Date: 2022-11-15
*/

.mw-editsection {
	display: flex;
	align-items: center;
	margin-left: var( --space-sm );
	float: right; // Can't target the container so have to use to float
	user-select: none;

	// Hide dividers since we are making links into icons
	&-bracket,
	&-divider {
		display: none;
	}

	// Fallback text button if extensions register those
	a {
		border-radius: var( --border-radius--small );
		font-size: 0.875rem;

		&:hover {
			background-color: var( --background-color-quiet--hover );
		}

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

.citizen-editsection-icon {
	width: 1.875rem;
	height: 1.875rem;
	opacity: var( --opacity-icon-base );
	text-indent: -9999px; // Hide text
	transition: @transition-opacity;

	&::before {
		.resource-loader-icon;
		display: block;
		background-size: 1.125rem;
	}

	&:hover {
		opacity: var( --opacity-icon-base--hover );
	}

	&:active {
		opacity: var( --opacity-icon-base--active );
	}
}

/* Correct directionality when page dir is different from site/user dir */
.mw-content-ltr .mw-editsection,
.mw-content-rtl .mw-content-ltr .mw-editsection {
	/* @noflip */
	margin-right: 0;
	/* @noflip */
	margin-left: var( --space-sm );
}

.mw-content-rtl .mw-editsection,
.mw-content-ltr .mw-content-rtl .mw-editsection {
	/* @noflip */
	margin-right: var( --space-sm );
	/* @noflip */
	margin-left: 0;
}

.skin-citizen-dark {
	// Flip icon for dark mode
	.mw-editsection > a::before {
		filter: invert( 1 );
	}
}