/* Chip — auto-loaded for the chip snippet (site/snippets/ui/chip.php). A
   pill with an optional icon or issue dot, a label and a remove control. The stranded
   look lives in stranded.snippet.css. */

.chip {
  --fa-serif: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  max-width: 100%;
  /* Optical centring, as in a list item (ui/list-item): the label moves down
     by --optical-shift and the chip gives back half of it above and below. */
  padding: calc(var(--space-2xs) - var(--optical-shift) / 2) var(--chip-pad-inline);
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--color-fg);
  background: var(--color-bar);
  border: var(--chip-border) solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset);
}
.chip__label {
  min-width: 0;
  padding-top: var(--optical-shift);
}
.chip__icon,
.chip__remove {
  flex: none;
  width: var(--mark-size);
}

/* Large: as big as the text around it, without vertical padding — the query
   in the search bar, the controls in the menubar. It keeps the chip's border,
   so it reads as the same chip as in the Selected strip, and stands in for
   plain text (or, the query chip, for the bar's loupe) without moving it:
   negative margins take its inset back out, the border above and below and
   border and padding at the sides, so its text sits where the plain text
   would, at the same x and baseline, and the line keeps its height. The
   label's optical shift (below) moves the text down by half the shift; the
   chip moves up by as much, by trading that half from its bottom margin to its
   top one. */
.chip--large {
  margin-block:
    calc(-1 * var(--chip-border) - var(--optical-shift) / 2)
    calc(-1 * var(--chip-border) + var(--optical-shift) / 2);
  margin-inline: calc(-1 * (var(--chip-pad-inline) + var(--chip-border)));
  /* A row that fits around it is as wide as its margin box, which the
     negative margins make narrower than the chip: the cap gives them back. */
  max-width: calc(100% + 2 * (var(--chip-pad-inline) + var(--chip-border)));
  padding-block: 0;
  font-size: inherit;
  line-height: inherit;
}
/* No padding to give back: the label's shift comes out of its own height. */
.chip--large .chip__label {
  margin-block: calc(var(--optical-shift) / -2);
}
/* The icon before the label (the query chip's loupe) stays where the bar's own
   loupe is: it moves down by what the chip moved up. */
.chip--large .chip__icon {
  position: relative;
  top: calc(var(--optical-shift) / 2);
}