.pf-c-chip-group {
  @include pf-t-light; // force the container follow the light theme

  --pf-c-chip-group--MarginRight: var(--pf-global--spacer--xs);
  --pf-c-chip-group--MarginBottom: calc(var(--pf-c-chip-group--c-chip--MarginBottom) * -1);
  --pf-c-chip-group--m-toolbar-PaddingTop: var(--pf-global--spacer--xs);
  --pf-c-chip-group--m-toolbar-PaddingRight: var(--pf-global--spacer--xs);
  --pf-c-chip-group--m-toolbar-PaddingBottom: var(--pf-global--spacer--xs);
  --pf-c-chip-group--m-toolbar-PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-chip-group--m-toolbar-BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-chip-group--m-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--300);
  --pf-c-chip-group__li--m-toolbar--MarginRight: var(--pf-global--spacer--sm);

  // Label in group
  --pf-c-chip-group__label--PaddingTop: var(--pf-global--spacer--xs);
  --pf-c-chip-group__label--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-chip-group__label--PaddingBottom: var(--pf-global--spacer--xs);
  --pf-c-chip-group__label--PaddingLeft: 0;
  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-chip-group__label--Maxwidth: #{pf-size-prem(120px)};

  // Chip
  --pf-c-chip-group--c-chip--MarginRight: var(--pf-global--spacer--xs);
  --pf-c-chip-group--c-chip--MarginBottom: var(--pf-global--spacer--xs);

  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: var(--pf-c-chip-group--MarginRight);
  margin-bottom: var(--pf-c-chip-group--MarginBottom);

  &.pf-m-toolbar {
    > li:not(.pf-m-overflow) {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      padding: var(--pf-c-chip-group--m-toolbar-PaddingTop) var(--pf-c-chip-group--m-toolbar-PaddingRight) var(--pf-c-chip-group--m-toolbar-PaddingBottom) var(--pf-c-chip-group--m-toolbar-PaddingLeft);
      margin-right: var(--pf-c-chip-group__li--m-toolbar--MarginRight);
      background-color: var(--pf-c-chip-group--m-toolbar--BackgroundColor);
      border-radius: var(--pf-c-chip-group--m-toolbar-BorderRadius);
    }

    > .pf-c-chip.pf-m-overflow {
      margin: 0;
    }
  }

  .pf-c-chip-group__label {
    @include pf-text-overflow;

    max-width: var(--pf-c-chip-group__label--Maxwidth);
    padding: var(--pf-c-chip-group__label--PaddingTop) var(--pf-c-chip-group__label--PaddingRight) var(--pf-c-chip-group__label--PaddingBottom) var(--pf-c-chip-group__label--PaddingLeft);
    font-size: var(--pf-c-chip-group__label--FontSize);
  }

  > .pf-c-chip {
    margin-right: var(--pf-c-chip-group--c-chip--MarginRight);
    margin-bottom: var(--pf-c-chip-group--c-chip--MarginBottom);

    &:last-child {
      --pf-c-chip-group--c-chip--MarginRight: 0;
    }
  }
}
