style.scss

.block-editor-global-styles__toggle-icon {
	fill: currentColor;
}

// @todo Ideally, popover, swatch size, and gap values should be CSS variables
// to apply precise grid layouts.
// https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
.block-editor-global-styles__shadow-popover-container {
	width: 230px;
}

.block-editor-global-styles__shadow__list {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: $grid-unit-10;
}

.block-editor-global-styles__clear-shadow {
	text-align: right;
}

.block-editor-global-styles-filters-panel__dropdown,
.block-editor-global-styles__shadow-dropdown {
	display: block;
	padding: 0;

	button {
		width: 100%;
		padding: $grid-unit-10;

		&.is-open {
			background-color: $gray-100;
		}
	}
}

// These styles are similar to the color palette.
.block-editor-global-styles__shadow-indicator {
	appearance: none;
	background: none;
	color: $gray-800;
	border: $gray-200 $border-width solid;
	border-radius: $radius-small;
	cursor: pointer;
	display: inline-flex;
	align-items: center;

	padding: 0;

	height: $button-size-small + 2 * $border-width;
	width: $button-size-small + 2 * $border-width;
	box-sizing: border-box;

	transform: scale(1);
	transition: transform 0.1s ease;
	will-change: transform;

	&:focus {
		border: #{ $border-width * 2 } solid $gray-700;
	}

	&:hover {
		transform: scale(1.2);
	}

	&.unset {
		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
	}
}

.block-editor-global-styles-advanced-panel__custom-css-input textarea {
	font-family: $editor_html_font;
	// CSS input is always LTR regardless of language.
	/*rtl:ignore*/
	direction: ltr;
}