%pills-a{
  display: inline-block;
  font-size: $font-small;
  text-decoration: none;
  padding: 0 $gap;
  line-height: -2+$tab-height;
  border: 1px solid $color-border;
  background-color: $color-background;
  color: $color-text;
  font-weight: bold;
  @extend %border-radius-large;
  &:hover{
    background: $color-foreground;
  }
  &.selected {
    background: $color-foreground;
  }
}
%pills-li{
  display: inline-block;
  & + li{
    margin-left: 0.5*$gap;
  }
  & > a{
    @extend %pills-a;
  }
}
%pills-ul{
  white-space: nowrap;
  @extend %flex;
  @extend %list-style-none;
  & > li{
    @extend %pills-li;
  }
}
%pills-parent{
  overflow: hidden;
  & > ul{
    @extend %pills-ul;
  }
}