/**
 * Temporary-user banner
 * (a.k.a. the gray banner that shows up for IP masking user)
 * per https://phabricator.wikimedia.org/T330510
 **/

@import 'mediawiki.skin.variables.less';

/* Flexbox gap not supported by all browsers */
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
.mw-temp-user-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: @spacing-50;
	padding: @spacing-50;
	font-size: @font-size-small;
	background-color: @background-color-backdrop-dark;
	color: @color-inverted;
}

.mw-temp-user-banner-username {
	font-weight: bold;
}

/* Flexbox gap not supported by all browsers */
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
.mw-temp-user-banner-buttons {
	display: flex;
	gap: @spacing-50;
}

.mw-temp-user-banner-tooltip {
	position: relative;

	.mw-temp-user-banner-tooltip-icon {
		.cdx-mixin-css-icon(@cdx-icon-info, @color-inverted);
	}

	& .oo-ui-widget {
		color: @color-base;
		z-index: @z-index-off-canvas-backdrop;
	}
}

.client-nojs .mw-temp-user-banner-tooltip-icon {
	display: none;
}