@import 'vars';

// var
// =============================================================
$label-default-bg: $btn-default-bg;
$label-default-color: $text-color;
$label-default-remove-color: $label-default-color;
$tag-border: transparent;
$tag-hover-border: $brand-primary-hover;
$tag-active-border: $brand-primary-active;

// for v4a-v4b;
$input-color-placeholder: $input-placeholder-color;

// bootstrap-tagsinput
// =============================================================

.bootstrap-tagsinput {
  display: inline-block;
  max-width: 100%;
  padding: $padding-base-vertical $padding-base-horizontal;
  line-height: $line-height-base;
  color: $text-color;
  vertical-align: middle;
  cursor: text;
  background-color: $color-white;
  border: 1px solid $input-border;
  border-radius: $input-border-radius;
  box-shadow: none;

  input {
    width: auto !important;
    max-width: inherit;
    padding: 0 6px;
    margin: 0;
    line-height: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;

    &:focus {
      border: none;
      box-shadow: none;
    }
  }

  .form-control {
    input::-moz-placeholder {
      color: $input-color-placeholder;
      opacity: 1;
    }

    input:-ms-input-placeholder {
      color: $input-color-placeholder;
    }

    input::-webkit-input-placeholder {
      color: $input-color-placeholder;
    }
  }

  .tag {
    margin: 1px;
    margin-right: 2px;
    border: 1px solid $tag-border;

    &:hover {
      border: 1px solid $tag-hover-border;
    }

    &:hover:active {
      border-color: $tag-active-border;
    }

    [data-role="remove"] {
      margin-left: 8px;
      cursor: pointer;

      &:after {
        padding: 0 2px;
        content: "x";
      }
    }

    &.label {
      display: inline-block;
      margin: 0 0 2px;
    }
  }
}
