@import "tailwindcss" source(none) important;
@import "../tailwind.css" source(none);
@source ".";

:root {
	color-scheme: only light;
}

/* Without this the wrapper divs stretch the pill to the host bar's full height. */
/* no-prefix */
#wpadminbar .extendify-notifications,
#wpadminbar .extendify-notifications .extendify-shared,
#extendify-toolbar .extendify-notifications,
#extendify-toolbar .extendify-notifications .extendify-shared {
	@apply flex items-center;
}

/* no-prefix */
#extendify-toolbar .extendify-notifications {
	@apply ml-1 mr-2;
}

/* Core's `.ab-item` chrome would frame the pill. Raw lengths, not the spacing
   scale: the theme vars are scoped below this element. */
/* no-prefix */
#wpadminbar #wp-admin-bar-extendify-notifications > .ab-item {
	display: flex !important;
	align-items: center !important;
	margin: 4px 8px !important;
	padding: 0 !important;
	background: transparent !important;
}

@media screen and (max-width: 782px) {
	/* Core hides non-allowlisted items here, and the bottom bar with them — the
	   pill is the only thing left to act on. */
	/* no-prefix */
	#wpadminbar li#wp-admin-bar-extendify-notifications {
		display: block !important;
	}

	/* no-prefix */
	#wpadminbar #wp-admin-bar-extendify-notifications > .ab-item {
		margin: 8px !important;
	}

	/* Only this bar: its own items already fill the width, so the label would
	   push the pill off-screen. Core hides enough that the label still fits. */
	/* no-prefix */
	#extendify-toolbar .ext-notification-pill-label {
		display: none;
	}
}