[data-legend-list] {
  display: flex;
  padding: 0.25rem 0 0.5rem;
  margin: 0;
  overflow: visible;
  list-style: none;

  &[data-legend-scroll] {
    overflow-x: auto;
  }

  &[data-legend-fill] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5ch, 1fr));
    padding: 0;
  }

  > li {
    flex: 0 0 auto;
    min-width: 0;
  }

  &[data-legend-fill] [data-legend-item] {
    width: 100%;
    min-width: 0;

    > [data-legend-value] {
      width: auto;
      min-width: 0;
      overflow-wrap: anywhere;
    }
  }
}

[data-legend-item] {
  display: block;
  min-width: 8.5ch;
  padding: 0.25rem 0.375rem;
  border: 0;
  border-radius: 0.25rem;
  color: inherit;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 450;
  line-height: var(--line-height-xs);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--black);
      background: var(--color);

      [data-legend-label],
      [data-legend-value],
      [data-legend-detail] {
        color: inherit;
      }
    }
  }

  &[data-press],
  &:is([data-active], [data-preview]) {
    color: var(--black);
    background: var(--color);

    [data-legend-label],
    [data-legend-value],
    [data-legend-detail] {
      color: inherit;
    }
  }

  &:focus-visible {
    outline: 1px solid var(--orange);
    outline-offset: 0.125rem;
  }

  &[data-muted] {
    opacity: 0.35;
  }

  > [data-legend-label] {
    display: block;
    color: var(--color);
    text-align: left;

    &::before {
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      margin-right: 0.35em;
      margin-bottom: 0.1rem;
      border-radius: 50%;
      background: currentColor;
    }
  }

  > [data-legend-value],
  > [data-legend-detail] {
    display: block;
    margin-top: 0.25rem;
    margin-left: auto;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  > [data-legend-value] {
    width: 7ch;
    min-height: 1em;
  }

  > [data-legend-detail] {
    color: var(--gray);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }

}