/* 값 목록이 칸 바로 밑에 뜨게 겉을 기준 자리로 둠. 폭은 안 주고 Field 의 열 배치가 늘려 줌 */
.pick-input { position: relative; min-width: 0; }

/* 칸과 화살표를 한 상자처럼 보이게 함. 테두리는 줄이 들고 칸과 화살표는 제 테두리가 없음 */
.pick-input__row {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.pick-input__box {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--font-body);
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: 0;
  background: transparent;
  color: var(--text-default);
}
.pick-input__box:focus-visible { outline: none; }

/* 고르는 칸이라는 표시. 값이 있든 없든 초점이 있든 없든 늘 보임 */
.pick-input__arrow {
  flex: none;
  font: inherit;
  font-size: var(--font-glyph);
  line-height: 1;
  padding-inline: var(--space-inset-xs);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

/* 초점 테를 칸이 아니라 줄에 둠. 칸과 화살표가 한 상자로 보이므로 테도 그 상자를 둘러야 함 */
.pick-input__row:focus-within { outline: var(--border-width) solid var(--focus-ring); }

/* 오류가 걸린 칸은 테두리로 갈라 보임. 껍데기 밖에 홀로 그려도 같게 보이게 칸 자신의 속성으로 고름 */
.pick-input__row:has(.pick-input__box[aria-invalid="true"]) { border-color: var(--border-danger); }

/* 읽기 전용은 못 고치는 칸이라 점선과 옅은 글자로 갈라 보임 */
.pick-input__row:has(.pick-input__box[readonly]) { border-style: dashed; background: var(--surface-sunken); }
.pick-input__box[readonly] { color: var(--text-muted); }

/* 닫혔을 때도 마디를 두고 감추기만 함. 칸의 aria-controls 가 늘 이 목록을 가리켜야 함 */
.pick-input__list[hidden] { display: none; }

/* 값 목록. 칸 밑에 겹쳐 떠서 아래 줄을 밀지 않음. 길면 목록 안에서만 밀림 */
.pick-input__list {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--layer-raised);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: var(--measure-select-list);
  overflow-y: auto;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.pick-input__option,
.pick-input__add,
.pick-input__none {
  padding: var(--space-inset-xs) var(--space-inset-sm);
  font-size: var(--font-body);
  color: var(--text-default);
  cursor: pointer;
}
.pick-input__none { color: var(--text-muted); cursor: default; }

/* 목록에 더해 쓰는 줄. 고르는 것이 아니라 없던 것을 만드는 줄이라 위에 두고 선으로 가름 */
.pick-input__add { border-bottom: var(--border-width) solid var(--border-muted); color: var(--text-muted); }

/* 짚은 줄. 초점은 칸에 남아 있어 이 표시가 어디를 고르는 중인지 보이는 유일한 자리임 */
.pick-input__option--at { background: var(--surface-sunken); }
.pick-input__option[aria-selected="true"] { font-weight: bold; }
.pick-input__option:hover,
.pick-input__add:hover { background: var(--surface-sunken); }