/* Chip of the design system (/design-system#chip), always a pill. The responsibles of a Pessoa were the first screen to use it.
   On the status scale, in px at every width: 24 px and 13 px medium; the small one, the label in a row, 20 px and 12 px. */
.ds-chip {
  --hover-size: 0;
  --chip-text: var(--ds-text);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-inline-size: 100%;
  block-size: var(--ds-status-height);
  padding-inline: 10px;
  border: 0;
  border-radius: var(--ds-radius-full);
  /* bg-subtle is 1.01:1 on the dark page, a chip with no shape; surface gives the dark the 1.1 the light has. */
  background: light-dark(var(--ds-bg-subtle), var(--ds-surface));
  color: var(--ds-text-secondary);
  font: inherit;
  font-size: var(--ds-status-font);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color var(--ds-duration-fast), color var(--ds-duration-fast);

  > svg { flex-shrink: 0; }
}

/* v5: the tint of the account, at the base's size. :where keeps it at the base's weight, so every variant below still wins. */
:where(html[data-visual="v5"]) .ds-chip {
  background: var(--ds-surface);
}
/* A queue wears the neutral of the +N, the text at 10 % over the ground it stands on, so the filter and the card's pill are
   one fill, and it holds on a hovered or chosen row. */
:where(html[data-visual="v5"]) .ds-chip--dot { background: color-mix(in oklab, var(--ds-text) 10%, var(--ground, var(--ds-bg-pure))); }

/* The label's own line is taller than the chip's 1: its overflow cut would take the foot of a g or a p otherwise. */
.ds-chip__label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.ds-chip__space { display: inline-block; white-space: pre; }

.ds-chip--color {
  background: color-mix(in oklch, var(--ds-chip-color) 22%, transparent);
  color: var(--chip-ink);
}

/* The ink is the colour's text, AA on its own tint; a chosen filter wears it as the fill, with the page behind as text. */
:is(.ds-chip--color, .ds-chip--dot) {
  --chip-ink: color-mix(in oklab, var(--ds-chip-color) 55%, var(--chip-text));
  --chip-ink-hover: color-mix(in oklab, var(--chip-ink) 86%, var(--chip-text));
  --chip-on-ink: var(--ds-bg-pure);
}

.ds-chip--sm {
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  padding-inline: 8px;
  font-size: var(--ds-status-font-sm);
}

/* The compact step, a label among others in a dense row (the inbox card's lists): 18 px and 11 px. */
.ds-chip--xs {
  gap: 3px;
  block-size: var(--ds-status-height-xs);
  padding-inline: 7px;
  font-size: var(--ds-status-font-xs);
}

/* 42 %, not 55 %: at 11 px on a hovered or open row the 55 % ink fell under AA in the dark. */
.ds-chip--xs:is(.ds-chip--color, .ds-chip--dot) { --chip-ink: color-mix(in oklab, var(--ds-chip-color) 42%, var(--chip-text)); }

/* The dot is all a queue has of its colour, so it keeps the colour's hue and chroma and only moves its lightness, one step
   per theme and the same at every size: the raw colour fell to 1.2:1 on a selected row in the dark (violet) and 1.4:1 on
   a hovered one in the light (amber), and the label's ink, mixed toward the text, turned every queue the same near black. */
:is(.ds-chip--color, .ds-chip--dot) {
  --chip-dot: light-dark(oklch(from var(--ds-chip-color) 0.5 c h), oklch(from var(--ds-chip-color) 0.78 c h));
}

.ds-chip__dot {
  flex-shrink: 0;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--chip-dot);
}

:where(html[data-visual="v5"]) .ds-chip__dot {
  inline-size: 7px;
  block-size: 7px;
}

.ds-chip--filter { cursor: pointer; }
:is(.ds-chip--filter, a.ds-chip):hover { background: light-dark(var(--ds-hover), var(--ds-border)); color: var(--ds-text); }
.ds-chip--color:is(.ds-chip--filter, a.ds-chip):hover { background: color-mix(in oklch, var(--ds-chip-color) 32%, transparent); color: var(--chip-ink-hover); }
/* Chosen is the filled pill, nothing added in front: the dot stays, the width does not move, and hover only tints. */
.ds-chip--filter:is([aria-pressed="true"], [aria-current="true"]) { background: var(--ds-cta); color: var(--ds-on-cta); }
.ds-chip--filter:is([aria-pressed="true"], [aria-current="true"]):hover { background: var(--ds-cta-hover); color: var(--ds-on-cta); }
:is(.ds-chip--color, .ds-chip--dot).ds-chip--filter:is([aria-pressed="true"], [aria-current="true"]) { background: var(--chip-ink); color: var(--chip-on-ink); }
:is(.ds-chip--color, .ds-chip--dot).ds-chip--filter:is([aria-pressed="true"], [aria-current="true"]):hover { background: var(--chip-ink-hover); color: var(--chip-on-ink); }
/* A pill that is a menu row's whole face (the card's lists dropdown) is chosen by its row, in the filter row's fill and ink. */
.ds-menu__item[aria-current="true"] > .ds-chip--color {
  --chip-ink: color-mix(in oklab, var(--ds-chip-color) 55%, var(--chip-text));
  background: var(--chip-ink);
  color: var(--chip-on-ink);
}
.ds-menu__item[aria-current="true"]:hover > .ds-chip--color { background: var(--chip-ink-hover); }
/* A chosen queue is filled the way a chosen list is, the theme's far side from the page, and its dot takes the opposite
   step so it never melts into the fill: deep with a bright dot in the light, bright with a deep dot in the dark. A deep
   fill in the dark stood 1.4 to 1.6:1 from an unchosen queue and read as an unchosen list's tint. */
.ds-chip--dot.ds-chip--filter:is([aria-pressed="true"], [aria-current="true"]) {
  --chip-ink: light-dark(oklch(from var(--ds-chip-color) 0.36 calc(c * 0.8) h), color-mix(in oklab, var(--ds-chip-color) 55%, var(--chip-text)));
  --chip-ink-hover: light-dark(oklch(from var(--ds-chip-color) 0.32 calc(c * 0.8) h), color-mix(in oklab, var(--ds-chip-color) 47%, var(--chip-text)));
  --chip-on-ink: var(--ds-bg-pure);
  --chip-dot: light-dark(oklch(from var(--ds-chip-color) 0.78 c h), oklch(from var(--ds-chip-color) 0.36 calc(c * 0.8) h));
}
:is(.ds-chip--filter, a.ds-chip):active { background: var(--ds-pressed); }
a.ds-chip { text-decoration: none; }
:is(.ds-chip, .ds-chip__remove):focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.ds-chip:is(:disabled, [aria-disabled="true"]) {
  background: var(--ds-hover);
  color: var(--ds-text-muted);
  cursor: not-allowed;
  filter: none;
}

/* Waiting says it in muted text; a dashed outline fails contrast and only repeats the state. */
.ds-chip--muted { color: var(--ds-text-muted); }

.ds-chip--person {
  padding-inline-start: 2px;

  .avatar { flex-shrink: 0; }
}

.ds-chip__remove {
  --hover-size: 0;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 16px;
  block-size: 16px;
  margin-inline-end: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--ds-duration-fast), color var(--ds-duration-fast);

  &:hover { background: color-mix(in oklch, var(--ds-text) 14%, transparent); color: var(--ds-text); }
}

.ds-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
  min-inline-size: 0;
}

.ds-chip-row--narrow { max-inline-size: 14rem; }

@media (pointer: coarse) {
  :is(.ds-chip--filter, a.ds-chip)::after,
  .ds-chip__remove::after { content: ""; position: absolute; inset: -10px -4px; }
  .ds-chip__remove::after { inset: -14px; }
}