/* A choice of what to do next, one row per option: the icon, the title in the body size and a short muted line under it. */
.ds-options { display: grid; gap: 2px; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.ds-options > li { min-inline-size: 0; }

.ds-options__title {
  margin: 0 0 var(--ds-space-2);
  padding-inline: var(--ds-space-3);
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-weight-regular);
}

.ds-option {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  inline-size: 100%;
  min-block-size: 56px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-radius-xl);
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s;
}
.ds-option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.ds-option:active { background: var(--ds-pressed); }
@media (any-hover: hover) {
  .ds-option:hover { background: var(--ds-fill-hover); }
}

.ds-option__icon { display: inline-grid; flex-shrink: 0; place-items: center; color: var(--ds-text-muted); }
.ds-option__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ds-option__title { color: var(--ds-text); font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-regular); line-height: 1.3; }
.ds-option__hint { color: var(--ds-text-muted); font-size: var(--ds-font-size-compact); line-height: 1.35; }
.ds-option__caret { flex-shrink: 0; color: var(--ds-text-muted); }
.ds-option.ds-shown-hover { background: var(--ds-fill-hover); }

/* --rows: a longer list of plain choices (no icon, no hint), as a menu's: rows of 44, a hairline between them, the hover
   a pill inside its row. */
.ds-options--rows { gap: 0; }
.ds-options--rows > li + li { border-block-start: 1px solid var(--ds-border); }
.ds-options--rows .ds-option { min-block-size: 44px; padding-block: var(--ds-space-1); border-radius: var(--ds-radius-lg); }
/* The lit row hides the hairlines on both its edges, so the pill does not sit cut between two lines. A touch screen keeps
   :hover on the last row tapped without lighting it, so there only the focus hides them. */
.ds-options--rows > li:has(.ds-option:focus-visible),
.ds-options--rows > li:has(.ds-option:focus-visible) + li { border-block-start-color: transparent; }
@media (any-hover: hover) {
  .ds-options--rows > li:has(.ds-option:hover),
  .ds-options--rows > li:has(.ds-option:hover) + li { border-block-start-color: transparent; }
}

/* The desktop root is 19 px: there the 13 px line is the 2xs step. */
@media (min-width: 100ch) {
  .ds-option__hint { font-size: var(--ds-font-size-2xs); }
}