.edit-post-pinned-plugins {
	display: none;

	@include break-small() {
		display: flex;
	}

	.components-icon-button {
		margin-left: 4px;
	}

	// Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override.
	.components-icon-button:not(.is-toggled) svg,
	.components-icon-button:not(.is-toggled) svg * {
		stroke: $dark-gray-500;
		fill: $dark-gray-500;
		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
	}

	// Forcefully colorize hover and toggled plugin icon states to ensure legibility and consistency.
	.components-icon-button.is-toggled svg,
	.components-icon-button.is-toggled svg * {
		stroke: $white !important;
		fill: $white !important;
		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
	}

	.components-icon-button:hover svg,
	.components-icon-button:hover svg * {
		stroke: $dark-gray-900 !important;
		fill: $dark-gray-900 !important;
		stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily.
	}
}