@import "mixins";
@import "variables";

.tokenfield {
  position: relative;

  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }

  &.tokenfield-mode-tokens {
    display: block;
    width: 100%;
    min-height: $input-height-base;
    padding: $padding-base-vertical $padding-base-horizontal 0;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $input-color;
    background-color: $input-bg;
    background-image: none;
    border: 1px solid $input-border;
    border-radius: $input-border-radius;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);

    @include form-control-focus;

    @include placeholder;

    &::-ms-expand {
      border: 0;
      background-color: transparent;
    }

    &[disabled],
    &[readonly],
    fieldset[disabled] & {
      background-color: $input-bg-disabled;
      opacity: 1;
    }

    &[disabled],
    fieldset[disabled] & {
      cursor: $cursor-disabled;
    }

    .focused {
      box-shadow: $tokenfield-focus-border;
    }

    .selected {
      background: $tokenfield-select-bg;
    }
  }

  .tokenfield-set {

    &> ul {
      margin: 0;
      padding: 0;
      list-style-type: none;

      &> li {
        float: left;
        margin-right: $padding-xs-horizontal;
        margin-bottom: ($padding-base-horizontal - $padding-small-vertical - 2);
        padding: 0 $padding-small-vertical;
        border-radius: $border-radius-base;
        line-height: 1.5;
        cursor: pointer;

        color: rgba(0,0,0,0.6);
        background: rgba(0,0,0,0.08);

        &:hover {
          color: rgba(0,0,0,1);
          background: rgba(0,0,0,0.16);
        }

        .item-remove {
          display: inline-block;
          font-weight: bold;
          font-size: 0.9285em;
          cursor: pointer;
          color: rgba(0,0,0,0.4);
        }
      }
    }
  }

  .tokenfield-input {
    margin-bottom: ($padding-base-horizontal - $padding-small-vertical - 2);
    border: none;
    outline: none;
    float: left;
  }

  .tokenfield-suggest {
    position: absolute;
    left: -1px;
    top: 100%;
    width: 100%;
    z-index: 10;
    overflow: auto;

    background-color: $tokenfield-bg;
    border: 1px solid $tokenfield-border;
    border-radius: $border-radius-base;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-sizing: content-box;

    &> ul {
      margin: 0;
      padding: 0;
      list-style: none;

      &> li {
        padding: $padding-base-vertical $padding-large-vertical;
        cursor: pointer;
      }
    }

  }

}