/* ==========================================================================
 * Badge group
 * ========================================================================== */

.mds-c-badge-group {
  align-items: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(var(--mds-d-spacing--xs) * -1);
  max-width: calc((100% + var(--mds-d-spacing--xs) * 2) + 1px);
  vertical-align: middle;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--med);
  }

  &:empty {
    display: none;
  }

  > .mds-c-badge {
    --badge-gap: var(--mds-d-spacing--xxs);

    margin: var(--badge-gap);
    max-width: calc((100% - (var(--badge-gap) * 2)) + 1px);
  }
}