/* The three ducklings (shared/_ducklings): brand colours that never mean a person (docs/visual-design.md). */
.ducklings {
  --duckling-size: 24px;
  --duckling-gap: 3px;
  /* The group's width, which the header's swim subtracts from the pond. */
  --ducklings-width: calc(3 * var(--duckling-size) + 2 * var(--duckling-gap));

  display: inline-flex;
  flex: none;
  gap: var(--duckling-gap);
}

.ducklings__duck {
  display: block;
  width: var(--duckling-size);
  height: calc(var(--duckling-size) - 1px);
}

.ducklings__duck--1 { fill: var(--duckling-1); }
.ducklings__duck--2 { fill: var(--duckling-2); }
.ducklings__duck--3 { fill: var(--duckling-3); }