/* Themed storage-location combobox (see location-picker.js). */
.locPicker{ position:relative; display:flex; flex-direction:column; gap:8px; }

.locPickerField{
  display:flex; align-items:center; gap:8px;
  padding:0 8px 0 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-input, var(--panel));
  transition:border-color .15s ease, box-shadow .15s ease;
}
.locPickerField:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.locPickerFieldIcon{ display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto; color:var(--accent2, var(--accent)); }
.locPickerFieldIcon svg{ width:18px; height:18px; }
input.locPickerInput{
  flex:1 1 auto; min-width:0;
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:10px 2px !important; margin:0 !important; color:var(--text); font:inherit;
}
input.locPickerInput:focus{ outline:none; box-shadow:none !important; }
.locPickerToggle{
  display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto;
  border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .2s ease;
}
.locPickerToggle:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--text); }
.locPickerToggle svg{ width:18px; height:18px; }
.locPickerToggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.locPickerMenu{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  max-height:260px; overflow:auto;
  padding:6px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius:12px;
  background:var(--surface-main, var(--panel));
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.locPickerOption{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:9px;
  background:transparent; color:var(--text); text-align:left; cursor:pointer; font:inherit;
}
.locPickerOption:hover{ background:var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); }
.locPickerOption.on{ background:color-mix(in srgb, var(--accent) 18%, transparent); font-weight:700; }
.locPickerIcon{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:7px;
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent2, var(--accent)); }
.locPickerIcon svg{ width:16px; height:16px; }

.locPickerSelected{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:10px;
  border:1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  color:var(--text); font-size:.82rem; font-weight:600;
}
.locPickerSelected .locPickerIcon{ width:24px; height:24px; }