.collection-tag {
  --_co-tag-color: var(--op-color-primary-plus-eight);
  --_co-tag-grayscale-color: oklch(from var(--_co-tag-color) l 0 0);
  --_co-tag-contrast-color: hwb(
    from var(--_co-tag-grayscale-color) h calc(((b - 50) * 999)) calc(((w - 50) * 999))
  );
  --_co-tag-button-size: 4rem;
  --_co-tag-padding: var(--op-space-2x-small);

  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--_co-tag-padding);
  align-items: center;
  box-shadow: none;
  border-radius: calc((var(--_co-tag-button-size) + var(--_co-tag-padding)) / 2);
  padding: var(--_co-tag-padding);
  padding-inline-start: var(--op-space-medium);
  font-size: var(--op-font-small);
  background-color: var(--_co-tag-color);
  color: var(--_co-tag-contrast-color);
  text-wrap: auto;

  > *:not(:first-child) {
    align-self: start;
  }
}