/**
 * @provides aphront-tokenizer-control-css
 * @requires aphront-typeahead-control-css
 */

body div.jx-tokenizer {
  background: transparent;
  position: relative;
  width: 100%;
}

body div.jx-tokenizer-container {
  position: relative;
  display: block;
  padding: 0 0 2px 0;
  min-height: 30px;
  height: auto;
}

var.jx-tokenizer-metrics {
  position: absolute;
  left: 20px;
  top: 20px;
}

body input.jx-tokenizer-input {
  border: 1px solid transparent;
  border-width: 1px 0px;
  padding: 3px;
  outline: none;
  float: left;
  width: 100%;
  border-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: 13px;
  color: #333;
  height: 26px;
}

body input.jx-tokenizer-input:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-color: transparent;
}

body input.jx-typeahead-placeholder {
  margin-left: 4px;
  color: {$greytext};
}

a.jx-tokenizer-x {
  margin-left: 4px;
  color: {$bluetext};
}

a.jx-tokenizer-x:hover {
  color: {$darkbluetext};
  text-decoration: none;
}

a.jx-tokenizer-token {
  padding: 2px 6px 3px;
  border:  1px solid {$lightblueborder};
  margin: 3px 2px 0 4px;
  background: #dee7f8;
  float: left;
  cursor: pointer;
  border-radius: 3px;
  color: {$darkbluetext};

}

a.jx-tokenizer-token:hover {
  text-decoration: none;
  border-color: {$blueborder};
  background: #CDD9F0;
}

.jx-tokenizer-token .phui-icon-view {
  display: inline-block;
  margin: 2px 4px -3px 0;
}

.tokenizer-result {
  position: relative;
  padding: 5px 8px 5px 28px;
}

.tokenizer-result .phui-icon-view {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 5px;
  left: 8px;
}

.tokenizer-result-closed {
  color: {$greytext};
}

.tokenizer-closed {
  margin-top: 2px;
}