@layer modules {
  .member-picker {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    min-inline-size: 0;
  }

  .member-picker__fields {
    display: grid;
    gap: var(--block-space);

    @media (min-width: 700px) {
      grid-template-columns: var(--member-picker-fields-columns, minmax(0, 2fr) minmax(14rem, 1fr));
    }
  }

  .member-picker__fields--single {
    --member-picker-fields-columns: minmax(0, 1fr);
  }

  .member-picker__field {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    min-inline-size: 0;
    position: relative;
  }

  .member-picker__options {
    background: var(--color-surface);
    border: 1px solid var(--color-ink-light);
    filter: drop-shadow(0 0.5rem 1.5rem oklch(var(--lch-void) / 20%));
    inset: auto;
    margin: 0;
    max-block-size: 20rem;
    overflow-y: auto;
    padding: var(--block-space-half);
    position: fixed;
    z-index: var(--z-popup);
  }

  .member-picker__option {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--block-space-half);
    inline-size: 100%;
    min-inline-size: 0;
    padding: var(--block-space-half) var(--inline-space);
    text-align: start;

    &[aria-selected="true"],
    &[aria-pressed="true"],
    &:has(input:checked) {
      background: var(--color-selected);
    }

    &.member-picker__option--active:not([aria-selected="true"]) {
      background: oklch(var(--lch-blue-lightest));
    }

    @media (any-hover: hover) {
      &:hover:not([aria-selected="true"]):not([aria-pressed="true"]):not(:has(input:checked)) {
        background: oklch(var(--lch-blue-lightest));
      }
    }

    &:focus-visible,
    &:has(input:focus-visible) {
      box-shadow: inset 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
      outline: none;
    }
  }

  .member-picker__trigger {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: var(--font-sans);
    justify-content: space-between;
    text-align: start;
  }

  .member-picker__credential-option {
    color: var(--color-ink);
    font-size: inherit;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
  }

  .member-picker__credential-all[aria-pressed="true"]::after,
  .member-picker__credential-option:has(input:checked)::after {
    content: "\2713";
    font-weight: 700;
    margin-inline-start: auto;
  }

  .member-picker__empty {
    margin: 0;
    padding: var(--block-space) var(--inline-space);
    text-align: center;
  }

  .member-picker__selections {
    display: grid;
    gap: var(--block-space-half);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  }

  /* The avatar spans both rows; name and credentials sit on the first, the
     position select under the name. The remove button is pinned top-right,
     so the header row reserves room for it. */
  .member-picker__selection {
    align-items: center;
    background: var(--color-ink-lightest);
    border: 1px solid var(--color-ink-light);
    column-gap: var(--inline-space);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-inline-size: 0;
    padding: var(--block-space-half) var(--inline-space);
    position: relative;

    > .avatar {
      grid-row: span 2;
    }
  }

  .member-picker__selection-header {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    min-inline-size: 0;
    padding-inline-end: 2rem;
  }

  .member-picker__selection-name {
    font-weight: 600;
    min-inline-size: 0;
  }

  /* The negative margin lines the quiet select's text up with the name. */
  .member-picker__position {
    justify-self: start;
    margin-inline-start: -0.4em;
    max-inline-size: calc(100% + 0.4em);
  }

  .member-picker__conflicts {
    grid-column: 2;
  }

  .member-picker__remove {
    --btn-size: 2rem;

    inset-block-start: var(--block-space-half);
    inset-inline-end: var(--block-space-half);
    position: absolute;
  }
}