$b-design-tag-white-close-btn-bg: $color-fill1-2;
$b-design-tag-grey-close-btn-bg: $color-fill1-1;
$b-design-tag-grey-checked-normal-border-color: $color-brand1-6;
$b-design-tag-grey-checked-primary-border-color: $color-brand1-2;

$b-design-tag-size-l-padding-r: $s-1;
$b-design-tag-size-m-padding-r: $s-1;
$b-design-tag-size-s-padding-r: $s-1;
$b-design-tag-size-xs-padding-r: 3px;
$b-design-tag-size-l-margin-l: $s-2;
$b-design-tag-size-m-margin-l: $s-2;
$b-design-tag-size-s-margin-l: $s-2;
$b-design-tag-size-xs-margin-l: $s-1;

$b-design-tag-size-xs-height:$s-5;
$b-design-tag-size-xs-padding-lr:$s-3;
$b-design-tag-size-xs-text-size:$s-3;
$b-design-tag-size-xs-icon-font:$s-3;
$b-design-tag-size-xs-content-min-width:$s-7;
$b-design-tag-size-xs-tick-icon-size:10px;

$b-design-tag-size-l-icon-bg-size:$s-6;
$b-design-tag-size-m-icon-bg-size:$s-5;
$b-design-tag-size-s-icon-bg-size:$s-4;
$b-design-tag-size-xs-icon-bg-size: $s-4;

@mixin tag-close-btn-bg($iconBgSize) {
  .#{$css-prefix}tag-close-btn {
    .#{$css-prefix}icon {
      position: relative;
      z-index: 2;

      &::after {
        content: "";
        position: absolute;
        left: calc(50% - #{$iconBgSize} / 2);
        top: calc(50% - #{$iconBgSize} / 2);
        width: $iconBgSize;
        height: $iconBgSize;
        border-radius: 100%;
        z-index: -1;
      }
    }
  }
}