$tag-size-middle: 24px !default;

$tag-font-size-middle: 12px !default;

$tag-sizes: (
  'middle': $tag-size-middle
) !default;

$tag-font-sizes: (
  'middle': $tag-font-size-middle
) !default;

$tag-colors: (
  'brand': $brand,
  'gray': $spliter-gray
) !default;

$tag-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $tag-colors
) !default;


.mx{
  &-tag{
    display: inline-block;
    user-select: none;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;

    @include text-ellipsis();

    &--plain{
      border-width: 1px;
      border-style: solid;
    }

    @each $name,$size in $tag-sizes{
      &--#{$name}{
        height: $size;
        line-height: $size;

        $radius: div($size,2);

        padding-left: $radius;
        padding-right: $radius;

        font-size: map-get($map: $tag-font-sizes, $key: $name);

        &.mx-tag--round:not(.mx-tag--mark){
          border-radius: $radius;
        }

        &.mx-tag--mark{
          border-top-right-radius: $radius;
          border-bottom-right-radius: $radius;
        }

        &.mx-tag--plain{
          line-height: subtract($size, 2px);
        }
      }
    }

    @each $name,$color in $tag-theme-colors{
      &--#{$name}{
        background-color: $color;

        @if($name == 'gray'){
          color: $dark-gray;
        } @else{
          color : $white;
        }

        &.mx-tag--plain{
          color: $color;
          border-color: $color;
          background-color: transparent;
        }
      }
    }
  }
}