/* ui-icons: an inline line icon sized by its text (the block sets the font-size), plus the editor picker. */
.cm-icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* the picker (block editor settings panel) */
.cm-icon-picker { margin-bottom: 16px; }
.cm-icon-picker__label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.cm-icon-picker__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-icon-picker__current { display: inline-flex; align-items: center; gap: 6px; min-width: 7em; font-size: 13px; }
.cm-icon-picker__current .cm-icon { font-size: 22px; }
.cm-icon-picker__current--none { opacity: 0.6; }
.cm-icon-picker__panel { margin-top: 8px; border: 1px solid #ddd; border-radius: 2px; padding: 8px; }
.cm-icon-picker__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-height: 220px; overflow-y: auto; margin-top: 8px; }
.cm-icon-picker__item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid transparent; border-radius: 2px; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.cm-icon-picker__item .cm-icon { font-size: 20px; }
.cm-icon-picker__item:hover, .cm-icon-picker__item:focus-visible { border-color: #1e1e1e; }
.cm-icon-picker__item.is-selected { background: #1e1e1e; color: #fff; }
.cm-icon-picker__empty { margin: 8px 0 0; font-size: 12px; opacity: 0.7; }