.#{$pui}tag {
  @include sizes;
  @include ui-colors($hover: false);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  height: $tag-height;
  padding: 0 $tag-padding-h;
  line-height: 1.5;
  border-width: 1px;
  border-style: solid;
  border-radius: $tag-border-radius;
  font-size: $size-small;

  &.control {
    @include control;
    @include ui-colors($hover: true);
  }
}

.#{$pui}tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .#{$pui}tag:not(:last-child) {
    margin-right: $tags-gap;
  }

  &.attached {
    .#{$pui}tag {
      margin-right: 0;

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right-width: 0;
      }

      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left-width: 0;
      }
    }
  }
}