@layer components {
  /*
    選ぶ欄。欄はInput（field.css）、候補の一覧はComboboxの共通の一覧（field.css）、選んだ値はTag（tag.css）をそのまま使う。
    名前・欄・選んだ値・補足の間は、Fieldのラベルと欄の間と同じにする。
  */
  .rx-picker {
    display: grid;
    gap: 0.375rem;
    min-inline-size: 0;
  }

  /*
    候補の一覧は、BC2のラベルの候補（実測: screenshots/basecamp2-official/bc2-help-file-labels-02.png (78, 391, 194, 64)、1倍）
    やジャンプの候補（overlays.md 1f）と同じく、検索欄のすぐ下に開く。選んだ値と補足の下まで離さないよう、
    欄と同じ行に置き、その行の下端から開く（行は名前と欄だけを決め、他は後ろの行へ順に並べる）。
  */
  .rx-picker > .label {
    grid-row: 1;
  }

  /* 位置を決める一覧は、終わりの線も書かないと領域の下端まで伸びるので、2行目の始まりと終わりを両方書く。 */
  .rx-picker > :is(.native, .search, .options) {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }

  .rx-picker > .label {
    font-size: var(--rx-label);
    font-weight: var(--rx-label-weight);
    line-height: var(--rx-label-leading);
  }

  .rx-picker > .rx-input {
    inline-size: 100%;
    padding-inline-end: 1em;
  }

  .rx-picker > .rx-input[hidden],
  .rx-picker > .values[hidden],
  .rx-picker > .note[hidden] {
    display: none;
  }

  .rx-picker > .values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .rx-picker > .note,
  .rx-picker > .messages > .help {
    color: var(--rx-muted);
    font-size: var(--rx-small);
    line-height: var(--rx-small-leading);
  }

  .rx-picker:has(> .search[data-invalid="true"]) > .note {
    color: var(--rx-danger);
  }

  .rx-picker > .messages > .error {
    display: flex;
    align-items: start;
    gap: var(--rx-space-1);
    color: var(--rx-danger);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
  }

  .rx-picker > .messages > .error > .rx-icon {
    flex: none;
    margin-block-start: calc(3em / 14);
  }
}