/* The right-click menu of level design (levelmenu.js). Shared by the hierarchy and the picker. */
.ll-menu {
  position: fixed; z-index: 60; min-width: 220px; padding: 4px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55); font-size: 12px;
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.ll-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px;
  background: none; border: 0; border-radius: 4px; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.ll-menu-item:hover:not(:disabled) { background: rgba(78, 161, 255, .22); }
.ll-menu-item:disabled { opacity: .4; cursor: default; }
/* [icon] label ...... hint  tick */
.ll-menu-ico { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--dim); }
.ll-menu-item:hover:not(:disabled) .ll-menu-ico, .ll-menu-item.on .ll-menu-ico { color: var(--text); }
.ll-menu-ico.tone-shadable { color: var(--accent); }
.ll-menu-ico.tone-tiled { color: #3cc4b1; }
.ll-menu-ico.tone-group { color: var(--warn); }
.ll-menu-check { flex: none; width: 12px; text-align: right; color: var(--accent); }
.ll-menu-label { flex: 1; }
.ll-ico { flex: none; display: inline-block; vertical-align: -2px; }
.ll-menu-hint { color: var(--dim); font-size: 11px; }
.ll-menu-sep { height: 1px; margin: 4px 2px; background: var(--line); }