.nut-tag {
  padding: $tag-padding;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: $tag-font-size;
  border-radius: $tag-border-radius;
  height: $tag-height;
  color: $tag-color;
  border: $tag-border-width solid transparent;

  .nut-icon {
    vertical-align: middle;
    margin-left: 4px;
    color: $tag-color;
  }

  &-text {
    font-size: $tag-font-size;
    color: $tag-color;

    &-plain {
      color: $color-title;
    }
  }

  &-default {
    background: $tag-background-color;
  }

  &-primary {
    background: #fa2c19;
  }

  &-info {
    background: $tag-info-background-color;
  }

  &-success {
    background: $tag-success-background-color;
  }

  &-danger {
    background: $tag-danger-background-color;
  }

  &-warning {
    background: $tag-warning-background-color;
  }

  &-round {
    border-radius: $tag-round-border-radius;
  }

  &-mark {
    border-radius: $tag-mark-border-radius;
  }

  &-close {
    cursor: pointer;
  }

  &-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: $tag-font-size;
    color: $tag-color;
    margin-left: 4px;
  }

  &-plain {
    background-color: #fff;
    border: $tag-border-width solid $color-title;
  }
}

[dir='rtl'] .nut-tag,
.nut-rtl .nut-tag {
  .nut-icon {
    margin-left: 0;
    margin-right: 4px;
  }
}


$tagCloseIconSize: 14px;

@mixin tagStyle($color, $bg, $borderColor) {
  color: $color;
  background-color: $bg;
  position: relative;

  &::after {
    position: absolute;
    top: -50%;
    left: -50%;
    display: block;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    border: 1px solid $borderColor;
    transform: scale(0.5);
    content: '';
  }
}

.mj-tag {
  border: unset;
  padding: 0 $spacing-1;
  font-size: $tag-large-font-size;
  border-radius: $tag-large-border-radius;
  height: $tag-large-height;
  line-height: $tag-large-height;
  box-sizing: border-box;
  font-weight: $font-weight-bold;
  display: inline-flex;

  &::after {
    border-radius: calc($tag-large-border-radius * 2);
  }


  &-small {
    height: $tag-height;
    line-height: $tag-height;
    font-size: $tag-font-size;
    border-radius: $tag-border-radius;

    &::after {
      border-radius: calc($tag-border-radius * 2);
    }
  }

  &-round {
    &-default, &-small {
      border-radius: $radius-circle;
    }
  }

  &-primary {
    &-default {
      @include tagStyle($tag-primary-color, $tag-primary-background-color, transparent);
    }

    &-fill {
      @include tagStyle($color-white, $tag-primary-color, transparent);
    }

    &-plain {
      @include tagStyle($tag-primary-color, $color-white, $tag-primary-color);
    }
  }

  &-warning {
    &-default {
      @include tagStyle($tag-warning-color, $tag-warning-background-color, transparent);
    }

    &-fill {
      @include tagStyle($color-white, $tag-warning-color, transparent);
    }

    &-plain {
      @include tagStyle($tag-warning-color, $color-white, $tag-warning-color);
    }
  }

  &-danger {
    &-default {
      @include tagStyle($tag-danger-color, $tag-danger-background-color, transparent);
    }

    &-fill {
      @include tagStyle($color-white, $tag-danger-color, transparent);
    }

    &-plain {
      @include tagStyle($tag-danger-color, $color-white, $tag-danger-color);
    }
  }

  &-success {
    &-default {
      @include tagStyle($tag-success-color, $tag-success-background-color, transparent);
    }

    &-fill {
      @include tagStyle($color-white, $tag-success-color, transparent);
    }

    &-plain {
      @include tagStyle($tag-success-color, $color-white, $tag-success-color);
    }
  }

  &-default {
    &-default {
      @include tagStyle($tag-color, $tag-background-color, transparent);
    }

    &-fill {
      @include tagStyle($color-white, $tag-color, transparent);
    }

    &-plain {
      @include tagStyle($tag-color, $color-white, $tag-color);
    }
  }

  &-close-icon {
    line-height: $tagCloseIconSize;
    margin-left: $spacing-0;
    font-size: $tagCloseIconSize !important;

    &-fill {
      color: $color-white;
    }

    &-plain,
    &-default {
      color: $color-text-disabled;
    }
  }
}

.nut-tag-text {
  all: unset;
  line-height: 1.5;
  font-size: inherit !important;
  color: inherit !important;
}