/* The list row: one item per line, the main action on the row's click. */
.cs-picker-row {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  inline-size: 100%;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-block-end: 1px solid color-mix(in oklch, var(--ds-border-strong) 45%, transparent);
  background: transparent;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.12s;
}

.cs-picker-row:last-child { border-block-end: 0; }
.cs-picker-row:hover { background: var(--ds-hover); }
.cs-picker-row__body { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; flex: 1; }

.cs-picker-row__name {
  font-size: 0.875rem;
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-picker-row__subtitle {
  font-size: 0.75rem;
  color: var(--ds-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-picker-row__aside {
  flex-shrink: 0;
  margin-inline-start: auto;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-2xs);
  font-variant-numeric: tabular-nums;
}

.cs-picker-row__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--ds-border-strong);
  color: transparent;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.cs-picker-row--selected, .cs-picker-row:has(input:checked) { background: color-mix(in oklch, var(--ds-accent) 14%, transparent); }
.cs-picker-row--selected:hover, .cs-picker-row:has(input:checked):hover { background: color-mix(in oklch, var(--ds-accent) 22%, transparent); }
.cs-picker-row:is(:focus-visible, :has(input:focus-visible)) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }

.cs-picker-row--selected .cs-picker-row__check, .cs-picker-row:has(input:checked) .cs-picker-row__check {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-bg-pure);
}

/* Loading: the ring turns where the check goes. */
.cs-picker-row > .cs-spinner { margin-inline: calc((1.4rem - 14px) / 2); }

.cs-picker-row--locked { cursor: default; opacity: 0.75; }
.cs-picker-row--locked:hover { background: transparent; }
.cs-picker-row[aria-disabled="true"] { color: var(--ds-text-muted); cursor: not-allowed; }
.cs-picker-row[aria-disabled="true"]:hover { background: transparent; }

/* A list of rows: no divider, a small gap and a rounded row; --divided keeps the lines, inside a card. */
.ds-list { display: grid; gap: 2px; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
/* A grid item is as wide as its longest line by default: a row (li or the picker's button) shrinks to the list instead, so
   a long name cuts with its ellipsis and the check stays in view. */
.ds-list > * { min-inline-size: 0; }
.ds-list .cs-picker-row { border: 0; border-radius: var(--ds-radius-lg); }
.ds-list .cs-picker-row:is(:hover, .is-active) { background: var(--ds-fill-hover); }
.ds-list .cs-picker-row--selected { background: var(--ds-cta-soft); }
.ds-list .cs-picker-row--selected:is(:hover, .is-active) { background: var(--ds-cta-soft-hover); }
.ds-list .cs-picker-row--selected .cs-picker-row__check { border-color: transparent; background: var(--ds-cta); color: var(--ds-on-cta); }

.ds-list--divided { gap: 0; }
.ds-list--divided .cs-picker-row { border-radius: 0; }
.ds-list--divided > * + * { border-block-start: 1px solid var(--ds-border); }
.ds-list--divided > * + .cs-picker-row { border-block-start: 1px solid var(--ds-border); }
/* The rows touch the list's edges, so on a rounded list (a sheet) the first and the last take its corners, and their hover
   follows the curve instead of painting a square over it; a list with no radius passes on 0, as before. */
.ds-list--divided > :first-child { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.ds-list--divided > :last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.ds-list--divided > :is(:first-child, :last-child) > .cs-picker-row { border-radius: inherit; }
/* In a ruled list the chosen row is told by its check over a light tint: a filled block would glue the rows together. */
.ds-list--divided .cs-picker-row--selected { background: color-mix(in srgb, var(--ds-cta-soft) 50%, transparent); }
.ds-list--divided .cs-picker-row--selected:is(:hover, .is-active) { background: var(--ds-cta-soft); }

/* Compact: a list that shows many rows in a small box (the member picker). It tightens the space only, never the type:
   the row's padding, its height and the face; the name and the subtitle keep the row's own sizes. */
.ds-list--compact .cs-picker-row { min-block-size: 40px; gap: var(--ds-space-2); padding: var(--ds-space-1) var(--ds-space-2); }
.ds-list--compact :is(.cs-picker-row > :first-child:not(.cs-picker-row__link), .cs-picker-row__link > :is(.avatar, .avatar-monogram):first-child) { --avatar-size: 32px !important; width: 32px !important; height: 32px !important; }
/* The monogram drawn inside a face carries its own size inline: it reads the face's instead, so the initials keep their ratio. */
.ds-list--compact .cs-picker-row .avatar > .avatar-monogram { --avatar-size: inherit !important; }
/* A compact list is a list of people: the name reads in the person row's medium, not the menu row's semibold. */
.ds-list--compact .cs-picker-row__name { font-weight: var(--ds-weight-medium); }
@media (pointer: coarse) { .ds-list--compact .cs-picker-row { min-block-size: 44px; } }
.ds-list--compact .cs-picker-row__body { gap: 0; }

/* A row with actions: the name is a link stretched over the whole row, and the actions sit above it, so no button lives inside a link. */
.cs-picker-row:has(> .cs-picker-row__link) { position: relative; }
.cs-picker-row:has(> .cs-picker-row__actions) { cursor: default; }
.cs-picker-row__link { color: inherit; text-decoration: none; }
.cs-picker-row__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cs-picker-row__link:focus-visible { outline: none; }
.cs-picker-row:has(> .cs-picker-row__link:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
.cs-picker-row__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; }
.cs-picker-row__actions:has(> .ds-menu-trigger[open]) { z-index: 2; }
.cs-picker-row__aside + .cs-picker-row__actions { margin-inline-start: 0.25rem; }
.cs-picker-row__body + .cs-picker-row__actions { margin-inline-start: auto; }

/* Read only: the row shows an item and does nothing on a click, so it has no hover. */
.cs-picker-row--static { cursor: default; }
.cs-picker-row--static:hover, .ds-list .cs-picker-row--static:hover { background: transparent; }

/* v5: 40 px rows on the scale's xl radius, the name at 14 in semibold, and locked by color instead of fading. */
:where(html[data-visual="v5"]) .cs-picker-row { min-block-size: 40px; }
:where(html[data-visual="v5"]) .ds-list:not(.ds-list--divided) .cs-picker-row { border-radius: var(--ds-radius-xl); }
:where(html[data-visual="v5"]) .cs-picker-row__name { font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-semibold); }
:where(html[data-visual="v5"]) .cs-picker-row__subtitle { font-size: var(--ds-font-size-compact); }
.ds-list .cs-picker-row.is-active .cs-picker-row__name { font-weight: var(--ds-weight-semibold); }
:where(html[data-visual="v5"]) .ds-list .cs-picker-row.is-active { background: var(--ds-cta-soft); }
:where(html[data-visual="v5"]) .ds-list .cs-picker-row.is-active:hover { background: var(--ds-cta-soft-hover); }
:where(html[data-visual="v5"]) .cs-picker-row--locked { opacity: 1; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-picker-row--locked, .cs-picker-row[aria-disabled="true"]) .cs-picker-row__name { color: var(--ds-text-muted); }

@media (pointer: coarse) {
  :where(html[data-visual="v5"]) .cs-picker-row { min-block-size: 44px; }
}
.cs-picker-row__badge { margin-block-start: 0.2rem; align-self: flex-start; }

/* Highlighted: the viewer's own row in a ranking, told apart by the fill and the "Você" under the name. */
.ds-list .cs-picker-row--highlight, .ds-list .cs-picker-row--highlight:hover { background: var(--ds-highlight-row); }