@import '../../minerva.less/minerva.variables.less';

.user-button {
	// Make sure count is positioned correctly in relation to bell icon
	position: relative;

	// can't use display:none class as icons must have a label to retain height
	.label {
		visibility: hidden;
	}

	&.loading span {
		display: none;
	}
}

//
// Technical debt relating to Minerva mobile having a single
// Echo icon rather than 2.
//

//
// Difference 1) Never show count for seen notifications
.mw-mf .mw-echo-notification-badge-nojs::after {
	content: none;
}

//
// Difference 2) Replace bell icon with a red circle
//
.mw-mf .mw-echo-unseen-notifications {
	margin: auto;
	background: @background-color-light;
	color: @color-subtle;
	cursor: pointer;

	.minerva-icon--circle {
		border-radius: @border-radius-circle;
		border: @border-width-thick @border-style-base #54595d;
		margin: auto;
		height: @icon-size-md;
		width: @icon-size-md;
		background: @background-color-destructive;
		border-color: @border-color-destructive;

		&::before {
			content: none;
		}
	}

	&::after {
		color: @color-inverted;
		content: attr( data-counter-text );
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		letter-spacing: -0.5px;
		padding: 0;
		border: 0;
		// T342907
		background-color: transparent !important;
	}

	&:hover {
		text-decoration: none;
	}
}