@use "~admin-stylesheets/colors";

.nelio-content-header {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 0.5em;
	z-index: 1;

	&__promo-button {
		margin-left: 1em;
	}

	&__block {
		align-items: center;
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		flex-shrink: 1;
		justify-content: center;
	}

	&__status-indicators:has(> .nelio-content-header__staging-site-warning):has(
			> .nelio-content-header__paused-social-publication-warning
		) {
		gap: 0.5em;
	}

	&__calendar-controls {
		justify-content: flex-start;
	}

	&__create-item-button {
		margin-right: 1em;
	}

	&__paused-social-publication-warning {
		background: colors.$component-colors__calendar-paused-background;
		color: colors.$component-colors__calendar-paused-foreground;
		border-radius: 2px;
		padding: 0.5em 1em;
	}

	&__staging-site-warning {
		background: colors.$component-colors__staging-site-background;
		color: colors.$component-colors__staging-site-foreground;
		border-radius: 2px;
		padding: 0.5em 1em;
	}

	&__toolbar {
		justify-content: flex-end;
	}

	&__toolbar-button {
		margin-left: 0.5em;

		.components-dropdown-menu__toggle {
			padding: 8px;
		}
	}

	.components-dropdown-menu__menu {
		padding: 0;
	}
}