//
// Groups
// =============================================================================

.group {
  @include clearfix();

  display: inline-block;
  margin-bottom: unitSize(3);
  padding: 0;

  span { margin-top: 0; }
}

.group-item {
  border: 1px solid getColor(base, lines);
  display: inline-block;
  float: left;
  font-size: pxToEm(14);
  line-height: unitSize(4);
  list-style: none;
  padding: 0 1em;
  transition: background-color $transition-duration;

  &:not(:first-child) { margin: 0 0 0 -1px; }

  &:hover { background-color: getColor(background, light); }

  &:first-child { border-radius: 3px 0 0 3px; }

  &:last-child { border-radius: 0 3px 3px 0; }

  &.is-active { background-color: getColor(background, light); }
}
