@layer components {
/* Colors and icons people pick for workspaces, goals, epics and projects (LookPicker, LookIcon) */
.i.look { color: var(--c); }

.pop.look-pop { width: 316px; padding: 8px; }
.look-pick { display: flex; flex-direction: column; gap: 8px; }
.lp-h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; }
.lp-t { font-size: var(--fs-12-5); font-weight: 600; color: var(--fg); }
.lp-reset { font-size: var(--fs-11-5); color: var(--fg-3); padding: 2px 6px; border-radius: var(--r-5); }
.lp-reset:hover { color: var(--fg); background: var(--bg-5); }
.lp-colors { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px; }
.lp-colors .sw { width: 18px; height: 18px; border-radius: var(--r-round); background: var(--c); box-shadow: inset 0 0 0 1px rgb(var(--white-rgb) / 0.1); }
.lp-colors .sw.on { box-shadow: 0 0 0 2px var(--bg-4), 0 0 0 4px var(--c); }
.look-pick .pop-search { margin-bottom: 0; }
.lp-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; max-height: 236px; overflow: auto; padding-right: 2px; }
.lp-i { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-6); color: var(--c); }
.lp-i:hover { background: var(--bg-5); }
.lp-i.on { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.lp-i .i { width: 16px; height: 16px; }
.lp-none { font-size: var(--fs-12); color: var(--fg-3); padding: 10px 4px; text-align: center; }

/* The button in forms that shows the current look and opens the picker */
.look-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-9); border: 1px solid var(--line-2); background: var(--bg-1); }
.look-btn:hover { border-color: var(--fg-4); }
.look-btn .i { width: 18px; height: 18px; }
.name-row { display: flex; gap: 8px; align-items: center; }
.name-row .input { flex: 1; min-width: 0; }
}