@include c(tag) {
  display: inline-block;

  @each $item in map-get($c-tag, heights) {
    &.h#{calc($item / 1px)} {
      @include text--middle(px2rpx($item));
      @include padding(
        null,
        px2rpx(calc($item / 2)),
        null,
        px2rpx(calc($item / 2))
      );
    }

    &.r#{calc($item / 1px)} {
      border-radius: px2rpx(calc($item / 2));
    }
  }

  @include s(is-deletable) {
    position: relative;
    padding-right: px2rpx(48px);

    &:after {
      @include size(px2rpx(16px), px2rpx(16px));
      @include position--absolute(50%, px2rpx(18px));

      content: "";
      display: block;
      transform: translateY(-50%);
      background: {
        image: url("#{$image-url}/components/tag/delete.png");
        size: 100% 100%;
      }
    }
  }
}