$pill-height: 28px;

.cobalt- {
  &Pill {
    @apply c-bg-neutralAlt c-text-base c-rounded-full c-py-2xs c-px-sm;
    display: inline-flex;
    align-items: center;

    height: $pill-height;

    font-size: 13px;
    white-space: nowrap;
  }

  &Pill--large {
    @apply c-py-xs c-px-md;
    $pill-height: 40px;
    height: $pill-height;
  }

  &Pill--colorConnect {
    @apply c-text-connect;
  }

  &Pill--overlayed {
    @apply c-bg-accentAlt c-text-accentAlt;
  }

  &Pill__Icon {
    @apply c-mr-2xs;
  }

  &PillGroup {
    @apply c--mt-xs c--ml-xs;
  }

  &PillGroup__Item {
    @apply c-mt-xs c-ml-xs;
    display: inline-block;

    vertical-align: top;
  }
}