/**
 * Gongbi Skin
 * © 2015-2021 Issara
 * © 2022-2024 WaitSpring
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */
@import '../variables.less';

@media screen {
	div.mw-echo-ui-overlay {
		z-index: 100;
	}

	/* Color of Echo icons */
	#pt-notifications-alert .mw-echo-notifications-badge,
	#pt-notifications-notice .mw-echo-notifications-badge,
	#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
	#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
		opacity: 0.7 !important;
	}

	/* Handle and position Echo icons */
	#pt-notifications-alert .mw-echo-notifications-badge,
	#pt-notifications-notice .mw-echo-notifications-badge {
		/* Temporary in case Echo is still -5px */
		top: 0;
	}

	#personal-extra {
		white-space: nowrap;
		order: 2;

		ul {
			padding: 0;
			margin: auto;
			list-style: none;
			.flex-display;
		}

		li {
			display: inline-block;
			margin: auto 0.25em;
		}
	}

	@media ( min-width: ( @desktop-mid-floor - 1px ) ) {
		div#personal {
			padding-left: 0;
		}

		#personal-extra {
			.flex-display;

			ul {
				gap: 0.25em;
			}
		}
	}

	@media ( max-width: @mobile-width ) {
		#personal-extra {
			.flex(1, 1, auto, 2);

			ul {
				margin: 0;
			}

			li {
				margin-right: 0.75em;
			}
		}

		.mw-echo-ui-overlay {
			.oo-ui-popupWidget {
				left: 0 !important;
				width: auto !important;
				max-width: 100vw;
				margin-right: auto;
				margin-left: auto;

				.oo-ui-popupWidget-popup {
					left: 0 !important;
					width: 95vw !important;
					margin: auto 0.5vw;

					.oo-ui-popupWidget-body {
						left: 0 !important;
						width: auto !important;
						max-width: 95vw !important;
						margin: auto 0;
					}

					.oo-ui-popupWidget-footer {
						.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement {
							width: 47.5vw !important;
						}
					}
				}
			}

			.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor {
				display: none;
			}
		}
	}
}
