/* The Library tab (ui/js/library.js): the personal setup library. Laid out
   like the Presets tab (presets.css) and the apply lists (apply.css): pickers,
   a filter, the items with a tick box, then the buttons. Uses only the app's
   :root tokens and the apply, preset and setup classes; every class of its
   own is prefixed with library-. */

.library-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.library-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-picks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.library-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 4px;
}

.library-tickbox {
  padding-left: 4px;
}

.library-in {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 11.5px;
}

.library[aria-busy="true"] .setup-btn {
  cursor: progress;
}