/* The icon picker's own styling, kept out of the admin's stylesheet so it can
   be loaded in the staff shell and in the stock admin alike. Colours come from
   Total CMS's own variables, so it looks like the form it sits in. */
/* The field it sits under is one narrow column of a form this project does not
   own, and an absolutely positioned panel was clipped by an ancestor of that
   form. A fixed panel is not clipped by anything, and gets the width a grid of
   2,500 icons needs. */
.iconpick { margin-top: .4rem; }
.iconpick-now { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.iconpick-preview { font-size: 1.3rem; width: 1.4rem; text-align: center; }
.iconpick-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .85rem; opacity: .8;
}
.iconpick-open, .iconpick-clear {
	font: inherit; font-size: .85rem; padding: .25rem .7rem; cursor: pointer;
	border-radius: var(--totalform-radius, 4px);
	border: 1px solid oklch(var(--totalform-border-color, 80% 0 0));
	background: oklch(var(--totalform-background, 100% 0 0));
	color: inherit;
}
.iconpick-open:hover, .iconpick-clear:hover {
	background: oklch(var(--totalform-lightgray, 88% 0 0) / .6);
}
.iconpick-panel {
	position: fixed; z-index: 2147483000; inset: auto;
	top: 12vh; left: 50%; transform: translateX(-50%);
	width: min(42rem, 92vw);
	box-shadow: 0 10px 40px oklch(0% 0 0 / .35);
	padding: .9rem; border-radius: var(--totalform-radius, 4px);
	border: 1px solid oklch(var(--totalform-border-color, 80% 0 0));
	background: oklch(var(--totalform-background, 100% 0 0));
}
.iconpick-search {
	width: 100%; font: inherit; padding: .4rem .6rem;
	border-radius: var(--totalform-radius, 4px);
	border: 1px solid oklch(var(--totalform-border-color, 80% 0 0));
	background: oklch(var(--totalform-background, 100% 0 0)); color: inherit;
}
.iconpick-count { margin: .5rem 0; font-size: .8rem; opacity: .7; }
.iconpick-grid {
	display: grid; gap: .3rem;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	/* Bounded on purpose: 2,500 icons must not push the Save button off the
	   bottom of the world. */
	max-height: 58vh; overflow-y: auto;
}
.iconpick-cell {
	display: flex; flex-direction: column; align-items: center; gap: .25rem;
	font: inherit; font-size: .68rem; padding: .45rem .2rem; cursor: pointer;
	border-radius: var(--totalform-radius, 4px); border: 1px solid transparent;
	background: transparent; color: inherit; overflow: hidden;
}
.iconpick-cell i { font-size: 1.15rem; }
.iconpick-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconpick-cell:hover {
	border-color: oklch(var(--totalform-accent, 60% .1 250));
	background: oklch(var(--totalform-accent, 60% .1 250) / .12);
}

/* The ground behind the panel, so a click anywhere closes it and the form
   underneath reads as out of reach while it is open. */
.iconpick-veil {
	position: fixed; inset: 0; z-index: 2147482999;
	background: oklch(0% 0 0 / .35);
}