/*
 * A chart's indicator picker on the overview (frames/companies/chart_indicators,
 * M17-D9): a search field over a short scrolling list of indicators, each a
 * button (signed in: it saves) or a link (signed out: it goes in the URL). It
 * opens in a popover from the chart's title (`.disclosure--popover`).
 */
@layer components {
  /* The popover's body sets the width; the picker fills it. */
  .chart-picker {
    display: grid;
    gap: var(--space-xs);
    min-inline-size: 0;
  }

  .chart-picker__results {
    max-block-size: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .chart-picker__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    inline-size: 100%;
    min-block-size: var(--target-min);
    padding: var(--space-2xs) var(--space-xs);
    border: 0;
    background: none;
    color: var(--color-ink);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &[aria-selected="true"] {
      background-color: var(--color-surface-raised);
    }
  }

  .chart-picker__item--locked {
    color: var(--color-ink-muted);
    cursor: default;
  }
}