woocommerce/plugins/woocommerce-blocks/assets/js/editor-components/incompatible-extension-notice/editor.scss

.wc-blocks-incompatible-extensions-notice.is-dismissible {
	margin: 0;
	padding-right: 16px;
	.components-notice__dismiss {
		min-width: 24px;
	}
	.components-notice__content {
		margin: 4px 0;
	}
	svg {
		width: 16px;
		height: 16px;
	}
	.wc-blocks-incompatible-extensions-notice__content {
		display: flex;

		details {
			margin: 0;

			&[open] {
				margin: 0 0 $gap;

				summary {
					svg {
						transform: rotate(180deg);
					}
				}
			}

			summary {
				display: block; // Remove marker for non Webkit-based browsers.
				cursor: pointer;
				text-decoration: underline;
				margin: 0 0 $gap;

				span {
					color: $gray-700;
					text-decoration: underline; // Ensure text-decoration works in Safari.
				}

				&::-webkit-details-marker {
					display: none; // Remove marker for Webkit-based browsers.
				}

				svg {
					width: 24px;
					height: 24px;
					position: relative;
					top: 6px;
					fill: $gray-700;
				}
			}
		}

		.wc-blocks-incompatible-extensions-notice__warning-icon {
			width: 24px;
			height: 24px;
			margin-right: 6px;
			min-width: 24px; // Ensure that notice is visible in Safari. See https://github.com/woocommerce/woocommerce-blocks/issues/11734
		}
	}
	ul {
		margin: 0 0 0 1.2em;
		padding: 0;
		list-style: disc outside;
	}
}

.wc-blocks-legacy-page-notice {
	margin: 0;
}