/* stylelint-disable selector-max-id */
@import 'mediawiki.skin.variables.less';

.ext-checkuser-tempaccount-reveal-ip-button.oo-ui-buttonElement {
	padding-top: 0;
	padding-bottom: 0;
	min-height: 0;
	margin-top: -8px;
	margin-bottom: -6px;
	margin-right: 0;
}

// Reduce spacing around the block details info icon to match the appearance
// of IPInfo's info icon.
// This needs high specificity to override OOUI defaults.
.ext-checkuser-blockDetailsPopupButtonWidget {
	&.oo-ui-buttonElement.oo-ui-popupButtonWidget {
		vertical-align: top;

		& > .oo-ui-buttonElement-button {
			min-width: 20px;
			min-height: 22px;
			padding: 0;

			& > .oo-ui-iconElement-icon {
				left: 0;
			}
		}
	}

	&-loadingIndicator {
		margin-top: @spacing-75;
	}
}

// Subtitle styles set a smaller line height
.mw-content-subtitle,
#contentSub,
#contentSub2 {
	.ext-checkuser-tempaccount-reveal-ip-button.oo-ui-buttonElement {
		margin-right: -3px;

		.oo-ui-buttonElement-button {
			min-height: 0;
			height: 18px;
			padding: 1px;
		}
	}
}

.ext-checkuser-tempaccount-reveal-ip {
	margin-left: 5px;

	&::before {
		content: '@{msg-parentheses-start}';
	}

	&::after {
		content: '@{msg-parentheses-end}';
	}
}

span.ext-checkuser-tempaccount-reveal-ip-button,
.ext-checkuser-tempaccount-reveal-ip {
	font-style: normal;
}

@media print {
	// Need high specificity to override OOUI button defaults.
	.oo-ui-buttonElement.ext-checkuser-tempaccount-reveal-ip-button {
		&&::before {
			content: ' ';
			white-space: pre;
		}

		> .oo-ui-buttonElement-button {
			display: none;
		}
	}
}

.mw-special-GlobalContributions {
	.mw-contributions-list {
		// In some cases, the contributions are contained in a pager having the
		// "plainlinks" class, which makes links to temp accounts inherit a rule
		// that removes the gray background highlighting them as temp accounts:
		// The rule here takes precedence over "plainlinks" and puts back the
		// background in the same way linker.styles.less does (T389474).
		.mw-tempuserlink {
			// The rules here are declared as !important as plainlinks sets
			// it's rules as !important
			/* stylelint-disable-next-line declaration-no-important */
			background: @background-color-interactive !important;
			/* stylelint-disable-next-line declaration-no-important */
			outline: 2px solid @background-color-interactive !important;
		}
	}
}

// collapsible list of temporary accounts. See SpecialContributionsHandler for implementation
.ext-checkuser-related-tas-list {
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 0.5em;

	// List is collapsed by default, show only 5 items max as defined by T417222
	li:nth-child( n+6 ) {
		display: none;
	}

	// If the list isn't collapsible, there's no need to show the toggle
	&:not( .ext-checkuser-taslist-collapsible ) ~ .ext-checkuser-related-tas-toggle {
		display: none;
	}
}

// Style the visibility toggle to look like a link
.ext-checkuser-related-tas-toggle {
	.cdx-mixin-link-base();
}

// When checkbox is unchecked, list is collapsed so hide the "hide" label
.ext-checkuser-related-tas-list-visibility-hidelabel {
	display: none;
}

// Treat the id like a class, which keeps it at a low priority for the cascade
[ id='ext-checkuser-related-tas-list-visibility' ] {
	// Checkbox is hidden and interacted with via its label
	display: none;

	// When toggled, display entire list
	&:checked {
		& ~ .ext-checkuser-related-tas-list li {
			display: list-item;
		}

		// Toggle text visibility based on checkbox state
		& ~ .ext-checkuser-related-tas-toggle {
			.ext-checkuser-related-tas-list-visibility-showlabel {
				display: none;
			}

			.ext-checkuser-related-tas-list-visibility-hidelabel {
				display: inline;
			}
		}
	}
}

// nojs for clipboard functionality for the collapsible list of connected accounts.
/* stylelint-disable-next-line selector-class-pattern */
.client-nojs .ext-checkuser-related-tas-list-copy-button {
	display: none;
}
