@import "tagsinput";

$tag-padding: .25rem;
$tag-margin: .2rem;

.input__tag{
  background-color: rgba($medium-gray, .5);
  border-radius: $input-radius;
  padding: $tag-padding;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// Override defaults
.bootstrap-tagsinput{
  margin-bottom: $form-spacing;

  // Use foundation precalculated methods to get accurate form css properties
  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom'));
  $tag-line-height: rem-calc(22);
  $span-height: ($input-font-size * unitless-calc($tag-line-height)) + (get-side($tag-padding, 'top') + get-side($tag-padding, 'bottom')) - rem-calc(1);

  width: 100%;
  min-height: $height;
  padding-bottom: $tag-margin / 4;

  .tag{
    color: inherit;
    margin-right: 0; // fix whitespace
    margin-bottom: $tag-margin;
  }
}