.wpcom-global-styles-notice-container {
	padding: 24px 24px 0;
	border-top: 1px solid #2f2f2f;
	// Hide the original border only when the notice is present.
	+ .edit-site-save-hub {
		border-top: none;
		padding-top: 0;
	}
}

.wpcom-global-styles-notice {
	margin: 0 0 24px;
	color: var(--color-text);

	.components-notice__content {
		margin-right: 0;
	}
}

// Inline the action buttons when there is another pinned notice,
// such as the Live Preview notice.
.components-notice-list:has(.components-notice) ~ .components-notice-list {
	.components-notice:has(.wpcom-global-styles-action-is-upgrade) {
		.components-notice__content {
			display: flex;
			flex-wrap: wrap;
			margin-right: 0;
			align-items: center;

			.components-notice__actions {
				margin-left: auto;

				.components-notice__action {
					margin-top: 0;
				}
			}
		}

		// Hack: this notice is intentionally set to be dismissible (but we hide the close icon),
		// so that it is guaranteed to be displayed after the pinned notices.
		.components-notice__dismiss {
			display: none;
		}
	}
}

.components-notice-list .components-notice__action.components-button.wpcom-global-styles-action-has-icon {
	display: flex;
	&::after,
	&::before {
		display: inline-block;
		width: 15px;
		height: 15px;
		position: relative;
		top: 1px;
	}

	&.is-primary {
		&::after,
		&::before {
			background-color: var(--wp-components-color-accent-inverted, #fff);
		}
	}

	&.is-secondary,
	&.is-link {
		&::after,
		&::before {
			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}
	}

	&.wpcom-global-styles-action-is-external::after {
		content: "";
		margin-left: 4px;
		/* stylelint-disable-next-line function-url-quotes */
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' aria-hidden='true' focusable='false'%3E%3Cpath d='M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z'%3E%3C/path%3E%3C/svg%3E");
	}

	&.wpcom-global-styles-action-is-support::before {
		content: "";
		width: 15px;
		height: 14px;
		margin-right: 4px;
		/* stylelint-disable-next-line function-url-quotes */
		mask-image: url('data:image/svg+xml,%3Csvg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5.8125 5.6875C5.8125 4.75552 6.56802 4 7.5 4C8.43198 4 9.1875 4.75552 9.1875 5.6875C9.1875 6.55621 8.53108 7.2716 7.6872 7.36473C7.58427 7.37609 7.5 7.45895 7.5 7.5625V8.5M7.5 9.25V10.375M13.5 7C13.5 10.3137 10.8137 13 7.5 13C4.18629 13 1.5 10.3137 1.5 7C1.5 3.68629 4.18629 1 7.5 1C10.8137 1 13.5 3.68629 13.5 7Z" style="stroke: %231E1E1E;" stroke-width="1.5"/%3E%3C/svg%3E%0A');
	}
}