/*
[roa_tas_term_chips] - a post's Industries, Skills and Company tags as linked chips.

The same pill as the course archive's company chips (.roa-tas-chip in archive.css): border in a
tint of currentColor, so it takes the colour of whatever text it sits in and reads on a light
or a dark section without naming a colour. Change one, change the other.

Size and gap are custom properties, so a template can adjust them in custom CSS without
fighting specificity:

    selector { --roa-chip-font-size: 0.8em; }
*/
.roa-tas-term-chips {
  --roa-chip-font-size: 0.7em;
  --roa-chip-gap: 0.5rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--roa-chip-gap);
  margin: 0;
  padding: 10px 0;
  list-style: none;
}

.roa-tas-term-chips .roa-tas-term-chips__item {
  margin: 0;
  padding: 0;
}

/* Qualified by the list so a theme or Elementor kit link colour does not win on load order. */
.roa-tas-term-chips .roa-tas-term-chip,
.roa-tas-term-chips .roa-tas-term-chip:visited {
  display: inline-block;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50px;
  padding: 6px 14px 4px;
  color: inherit;
  font-size: var(--roa-chip-font-size);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.roa-tas-term-chips .roa-tas-term-chip:hover {
  border-color: color-mix(in srgb, currentColor 60%, transparent);
  color: inherit;
  text-decoration: none;
}

.roa-tas-term-chips .roa-tas-term-chip:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}