/* ============================================================
   GP Team Hub - leadcols.css

   The two pickers over the lead table and the handle that resizes a
   column. A picker is a panel under its own press, and a press with
   something switched off carries the count of what is switched off.

   A panel sits in the page, so it wears the page tokens the rest of the
   lead table wears and reads right in all four themes. Opening and
   closing is leadpop.js's job.

   Doc: docs/notes/new/css/leadcols.css.md
   ============================================================ */

.lds-pan-w{position:relative;display:inline-flex;}
.lds-pan-n{
  margin-left:6px;padding:1px 6px;
  background:var(--accent);color:var(--ink-inverse);
  border-radius:var(--radius-pill);
  font-size:.68rem;font-weight:700;
}

.lds-pan{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  width:262px;max-width:86vw;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
}
.lds-pan-h{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;
  border-bottom:1px solid var(--line);
  font-size:.78rem;font-weight:600;color:var(--ink);
}
.lds-pan-h span{flex:1;}
.lds-pan-a{
  padding:2px 7px;cursor:pointer;
  background:var(--surface-hover);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-soft);font:inherit;font-size:.72rem;
}
.lds-pan-a:hover{color:var(--ink);border-color:var(--line-strong);}
.lds-pan-a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* Scrolls, because a market can carry eighty types and the panel is
   not the page. */
.lds-pan-b{max-height:302px;overflow-y:auto;padding:5px;}
.lds-pan-r{
  display:flex;align-items:center;gap:8px;
  padding:5px 7px;cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:.79rem;color:var(--ink-soft);
}
.lds-pan-r:hover{background:var(--surface-hover);color:var(--ink);}
.lds-pan-r input{cursor:pointer;flex:none;}
.lds-pan-l{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lds-pan-c{
  flex:none;font-size:.72rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.lds-pan-e{margin:8px 10px;font-size:.78rem;color:var(--ink-faint);}

/* ---- The handle on a column's edge ---- */
.lds-tbl thead th{position:relative;}
.lds-grip{
  position:absolute;top:0;right:0;bottom:0;
  width:7px;cursor:col-resize;
  user-select:none;
}
.lds-grip::after{
  content:"";
  position:absolute;top:22%;bottom:22%;right:2px;
  width:1px;background:var(--line-strong);
  opacity:0;
}
.lds-tbl thead th:hover .lds-grip::after{opacity:1;}
/* While a column is being dragged the pointer stays the handle's
   wherever it has got to, and nothing on the page takes a selection. */
body.lds-resizing{cursor:col-resize;user-select:none;}
body.lds-resizing .lds-grip::after{opacity:1;}

/* A panel under a press near the right of the row would run off the
   screen. leadpop.js measures it on the way open and sets this. */
.lds-pan-right{left:auto;right:0;}

@media (max-width:640px){
  .lds-pan{left:auto;right:0;}
}