/*
 * The menu icon picker on the content type form, drawn as a grid of small
 * glyphs the way an emoji picker is. Scoped by the icon-picker class the field
 * carries; no other select is touched.
 *
 * A stylesheet of its own because Filament's compiled CSS holds only the
 * classes Filament itself uses: a Tailwind utility written into an option
 * label does nothing, which is how the first version drew every icon at full
 * width.
 *
 * The open list is Filament's fi-dropdown-list, a one-column grid that the
 * select's JS builds for a flat set of options; fi-select-input-options-ctn
 * only exists when the options are grouped, and these are not.
 */

.icon-picker .icon-picker-glyph {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: text-bottom;
}

/* The chosen icon, in the closed field: glyph, name, what it is for. */
.icon-picker .fi-select-input-value-label .icon-picker-glyph {
    margin-inline-end: 0.5rem;
}

.icon-picker .icon-picker-hint {
    color: var(--gray-500);
    font-size: 0.875em;
    margin-inline-start: 0.375rem;
}

/* The open list: glyphs only, five to a row; the name is the hover title. */
.icon-picker .fi-dropdown-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.5rem;
}

/* Tall enough for the whole catalogue: ten rows and the search box. */
.icon-picker .fi-dropdown-panel {
    max-height: 30rem;
}

.icon-picker .fi-select-input-option {
    justify-content: center;
    padding: 0.625rem 0.5rem;
}

.icon-picker .fi-select-input-option .icon-picker-glyph {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-picker .fi-select-input-option .icon-picker-name {
    display: none;
}