/*
 * Baseline structural styles — layout and the dismiss button. Colors,
 * typography, and other branding are deliberately left to the active
 * theme (see the `header_alert_banner_enqueue` action) so this plugin
 * looks correct wherever it's dropped in without fighting theme CSS.
 */

.hab-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 0.75em 1em;
}

.hab-banner__content {
	flex: 1 1 auto;
	text-align: center;
}

.hab-banner__content > *:last-child {
	margin-bottom: 0;
}

.hab-banner__dismiss {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
}

.hab-banner__dismiss svg {
	width: 1em;
	height: 1em;
}

.hab-banner__dismiss:hover,
.hab-banner__dismiss:focus-visible {
	opacity: 0.7;
}