@import 'vars';

// Variables
$token-background: $gray-100;
$token-border: $gray-200;
$token-hover-border: $brand-primary-hover;
$token-active-border: $brand-primary-active;
$token-active-border-fallback: $token-active-border;  // IE8
$token-active-invalid-border: $token-background;

// for v4a-v4b;
$token-disabled-bg: $input-disabled-bg;
$input-color-placeholder: $input-placeholder-color;

// Mixins

@mixin tokenfield-focus($color: $input-focus-border-color) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  border-color: $color;
  outline: 0;
  // box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #{$color-rgba};
}

@mixin tokenfield-validation($border-color) {
  $shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($border-color, 20%);
  border-color: darken($border-color, 10%);
  box-shadow: $shadow;
}

@mixin border-radius($border-radius) {
  border-radius: $border-radius;
}

// Blink animation for duplicate tokens

@keyframes blink {
  0% {
    border-color: #ededed;
  }

  100% {
    border-color: #b94a48;
  }
}

// Tokenfield

.tokenfield {
  height: auto;
  min-height: $input-height;
  padding-bottom: 0;

  &.focus {
    @include tokenfield-focus();
  }

  // Tokens
  .token {
    @include border-radius(3px);
    box-sizing: border-box;
    display: inline-block;
    height: 22px;
    margin: -1px 5px 5px 0;
    white-space: nowrap;
    vertical-align: top;
    cursor: default;
    background-color: $token-background;
    border: 1px solid $token-border;

    &:hover {
      border-color: $token-hover-border;
    }

    &.active {
      border-color: $token-active-border;
      border-color: rgba($token-active-border, .8);
    }

    &.duplicate {
      border-color: $state-danger-border;
      animation: blink .1s normal ease infinite;
    }

    &.invalid {
      @include border-radius(0);
      background: none;
      border: 1px solid transparent;
      border-bottom: 1px dotted $brand-danger;

      &.active {
        @include border-radius(3px);
        background: $token-background;
        border: 1px solid $token-active-invalid-border;
      }
    }

    .token-label {
      display: inline-block;
      padding-left: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: top;
    }

    .close {
      display: inline-block;
      float: none;
      height: 100%;
      padding-right: 4px;
      margin-left: 5px;
      font-family: Arial;
      font-size: 1.1em;
      // line-height: 1.49em;
      line-height: inherit;
      vertical-align: top;
    }
  }

  // Inputs
  .token-input {
    width: 60px;
    min-width: 60px;
    height: 20px;
    padding: 0;
    margin-bottom: 6px;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .token-input:focus {
    border-color: transparent;
    outline: 0;

    /* IE6-9 */
    box-shadow: none;
  }

  // Disabled state
  &.disabled {
    cursor: not-allowed;
    background-color: $token-disabled-bg;

    .token-input {
      cursor: not-allowed;
    }

    .token:hover {
      cursor: not-allowed;
      border-color: $token-border;

      .close {
        cursor: not-allowed;
        opacity: .2;
      }
    }
  }
}

// Validation states

.has-warning .tokenfield.focus {
  @include tokenfield-validation($state-warning-text);
}

.has-error .tokenfield.focus {
  @include tokenfield-validation($state-danger-text);
}

.has-success .tokenfield.focus {
  @include tokenfield-validation($state-success-text);
}

// Various sizes

.tokenfield.input-sm, .input-group-sm .tokenfield {
  min-height: 30px;
  padding-bottom: 0;
}

.input-group-sm .token, .tokenfield.input-sm .token {
  height: 20px;
  margin-bottom: 4px;
}

.input-group-sm .token-input, .tokenfield.input-sm .token-input {
  height: 18px;
  margin-bottom: 5px;
}

.tokenfield.input-lg, .input-group-lg .tokenfield {
  min-height: 45px;
  padding-bottom: 4px;
}

.input-group-lg .token, .tokenfield.input-lg .token {
  height: 25px;
}

.input-group-lg .token-label, .tokenfield.input-lg .token-label {
  line-height: 23px;
}

.input-group-lg .token .close, .tokenfield.input-lg .token .close {
  line-height: 1.3em;
}

.input-group-lg .token-input, .tokenfield.input-lg .token-input {
  height: 23px;
  margin-bottom: 6px;
  line-height: 23px;
  vertical-align: top;
}

// input group
.input-group {
  .tokenfield + .input-group-btn {
    height: 100%;

    .btn {
      height: calc(100% + 2px);
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .tokenfield .token-input {
    width: 100% !important;
  }
}

// RTL

.tokenfield.rtl {
  text-align: right;
  direction: rtl;
}

.tokenfield.rtl .token {
  margin: -1px 0 5px 5px;
}

.tokenfield.rtl .token .token-label {
  padding-right: 4px;
  padding-left: 0;
}

/* Tokenfield-specific Typeahead styling */
.tokenfield .twitter-typeahead {
  float: none;
  width: auto;
}

.tokenfield .twitter-typeahead .tt-hint {
  height: 20px;
  padding: 0;
}

.tokenfield.input-sm .twitter-typeahead .tt-input, .tokenfield.input-sm .twitter-typeahead .tt-hint {
  height: 18px;
  font-size: 12px;
  line-height: 1.5;
}

.tokenfield.input-lg .twitter-typeahead .tt-input, .tokenfield.input-lg .twitter-typeahead .tt-hint {
  height: 23px;
  font-size: 18px;
  line-height: 1.33;
}

.tokenfield .twitter-typeahead .tt-suggestions {
  font-size: 14px;
}