/*
 * Citizen
 *
 * SkinStyles for Extension:Echo
 * Module: ext.echo.ui.desktop
 * Version: REL1_35 347c30e
 *
 * Date: 2021-08-11
*/

.mw-echo-ui-notificationBadgeButtonPopupWidget {
	&-popup {
		filter: none; // disable filter drop shadow

		> .oo-ui-popupWidget-popup {
			> .oo-ui-popupWidget {
				&-head {
					box-sizing: content-box; // fix overflow
					padding-top: 8px; // align with other menus
					border-bottom-color: var( --border-color-base );

					> .oo-ui-iconWidget {
						opacity: var( --opacity-icon-base );
					}

					> .oo-ui-labelElement-label {
						color: var( --color-base--emphasized );
					}
				}

				&-body {
					max-width: 100% !important; // do not overflow the screen
					overscroll-behavior: contain; // do not overscoll outside
				}

				&-footer {
					border-top-color: var( --border-color-base );

					.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons {
						display: flex;

						.oo-ui-buttonElement {
							display: block;
							width: 100%; // Buttons fill up the empty space

							&:last-child {
								border-left-color: var( --border-color-base );
							}
						}
					}
				}
			}
		}

		> .oo-ui-popupWidget-anchor {
			display: none; // the anchor overflow the viewport
		}
	}
}