@import '../../style/themes';
@import '../../style/mixins';

@mixin type($color) {
  color: $color;
  background: rgba($color, $tag-bg-opacity);
  border: 0 solid rgba($color, .3);
}

.x-tag {
  @include reset-component();

  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 $padding-xs;

  &-small {
    min-height: 24px;
    font-size: $font-size-sm;
  }
  &-medium {
    min-height: 28px;
    font-size: $font-size-base;
  }
  &-large {
    min-height: 34px;
    font-size: $font-size-lg;
  }

  &-round {
    border-radius: 34px;
  }

  &-default {
    @include type($text-color);
    @if $theme != dark {
      background: rgba($text-color, .05);
    } @else {
      background: rgba($text-color, .12);
    }
    border: 0 solid rgba($text-color, .3);
  }
  &-primary {
    @include type($primary-color);
  }
  &-info {
    @include type($info-color);
  }
  &-success {
    @include type($success-color);
  }
  &-warning {
    @include type($warning-color);
  }
  &-error {
    @include type($error-color);
  }

  &-bordered {
    border-width: 1px;
  }
  &-nowrap {
    white-space: nowrap;
  }

  &-close-icon {
    margin-left: $margin-xss;
    color: $text-color-secondary;
    cursor: pointer;
    user-select: none;
  }
}