/* ==========================================================================
 * Badges
 * ========================================================================== */

.mds-c-badges {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(var(--mds-d-spacing--xs) * -1);

  /* 1px addition to max-width necessary for Safari subpixel rendering issue */
  max-width: calc(100% + (var(--mds-d-spacing--xs) * 2) + 1px);
  vertical-align: middle;

  &:empty {
    display: none;
  }

  > .mds-c-badge {
    margin: var(--mds-d-spacing--xs);
  }

  .mds-c-badges {
    .mds-c-badge {
      margin: 0;
    }
  }
}