@layer components {
  .role-field__summary {
    min-block-size: var(--tap-min);
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .role-field__term {
    display: none;
    flex: none;
    font: var(--type-body);
    color: var(--color-ink);
  }

  .role-field--one .role-field__term {
    display: block;
  }

  .role-field__chosen {
    flex: auto;
    min-inline-size: var(--space-0);
    padding-block: var(--space-4);
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .role-field--one .role-field__chosen {
    color: var(--color-ink-muted);
    text-align: end;
  }

  .role-field__chosen[data-empty="true"] {
    color: var(--color-ink-faint);
  }

  .role-field__picker {
    position: static;
    display: none;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: none;
    margin: var(--space-0);
    padding: var(--space-0);
    border: none;
    background-color: transparent;
    color: inherit;
  }

  .role-field__picker[open] {
    display: block;
  }

  .role-field__picker:not(:modal) .role-field__bar {
    display: none;
  }

  .role-field__picker:modal {
    position: fixed;
    inset: var(--space-0);
    inline-size: calc(var(--size-fill) - 2 * var(--modal-inset));
    block-size: calc(var(--size-fill) - 2 * var(--modal-inset));
    max-inline-size: var(--modal-inline-size);
    max-block-size: var(--modal-block-size);
    margin: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    outline: none;
    border-radius: var(--modal-radius);
    background-color: var(--color-bg);
    color: var(--color-ink);
    box-shadow: var(--elev-4);
    transition:
      translate var(--dur-sheet) var(--ease-spring-soft),
      opacity var(--dur-base) var(--ease-calm);
  }

  @starting-style {
    .role-field__picker:modal {
      translate: var(--modal-enter-offset) var(--space-0);
      opacity: var(--opacity-none);
    }
  }

  .role-field__picker::backdrop {
    background-color: var(--color-scrim);
  }

  .modal .role-field__picker::backdrop {
    background-color: transparent;
  }

  .role-field__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .role-field__picker:modal .role-field__body {
    padding-block: var(--space-7) calc(var(--safe-bottom) + var(--space-9));
    padding-inline: var(--gutter-fluid);
  }

  .role-field__options {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-field);
    background-color: var(--color-surface);
  }

  .role-field__group {
    padding: var(--space-5) var(--space-5) var(--space-3);
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .role-field__group + .role-field__option {
    border-block-start: none;
  }

  .role-field__option,
  .role-field__add {
    --icon-size: var(--input-icon-size);

    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-5);
    font: var(--type-body);
    color: var(--color-ink);
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .role-field__option + .role-field__option,
  .role-field__option + .role-field__add,
  .role-field__option + .role-field__group {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .role-field__add {
    color: var(--color-link);
    font: var(--type-button);
  }

  .role-field__option {
    position: relative;
  }

  .role-field__check {
    position: absolute;
    opacity: var(--opacity-none);
  }

  .role-field__name {
    flex: auto;
  }

  .role-field__option .icon {
    visibility: hidden;
    color: var(--color-accent-ink);
  }

  .role-field__option:has(.role-field__check:checked) .icon {
    visibility: visible;
  }


  @media (any-hover: hover) {
    .role-field__option:hover,
    .role-field__add:hover {
      background-color: var(--color-surface-sunken);
    }
  }
}