/*
    This file is part of rhizi, a collaborative knowledge graph editor.
    Copyright (C) 2014-2015  Dor Garbash, Amir Sagie and Alon Levy

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../modules/mixins'; // For box-shadow

.input-container {
  left: $graph-margin-left;
  width: 35%;

  form {
    display: inline;
  }
}


.input-bar {
  font-family: $base-font-family;
  color: $mid-grey;
  max-height: $three-baselines;
  padding: 6px 8px 5px 8px;
  border: 1px solid $mid-grey;
  @include rz-box-sizing-border;
  background: white;
  width: 100%;
  &:focus {
    border: 1px solid $mid-grey;
    @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
  }  
}

#input-container__search {
  margin-top: $two-baselines;
  position: absolute;
}

#input-container__graph-input {
  position: absolute;
  margin-top: 80px;
  height: 36px;
  line-height: initial;
  &:focus {
    width: 80%;
  }
  [contentEditable=true]:empty:not(:focus):before{
  content:attr(placeholder)
}
}

#textanalyser.ui-autocomplete-input {
  font-family: $base-font-family;
  color: $mid-grey;
}

#textanalyser {
    height: 36px;
}

#btn_add {
  float: right;
  background: url(../img/plus-button.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: red;
  position: absolute;
  height: 36px;
  width: 36px;
  top: 0px;
  right: 0px;
  border: 0;
}

#btn_search {
  float: right;
  background: url(../img/search-icon.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: lightgreen;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 36px;
  width: 36px;
  border: 0;
}

.add-button:hover {
  background-color: $dark-magenta;
}

.add-button:focus {
  outline: none;
}

#input-suggestion {
    width: 100%;
}

.suggestion{
  position: relative;
  color: $dark-grey;
  max-height: 580px;
  overflow-y: scroll;
  font-size: $h3-size;
  list-style-type: none;
  width: inherit;
  margin-top: 6px;
  border: 1px solid $mid-grey;
  @include rz-box-sizing-border;
  background: white;
  z-index: 100;
  @include rz-box-shadow(0px, 3px, 6px, 0px, rgba(0,0,0,0.3) );
}

.suggestion-item {
  padding: 6px 0px 6px 18px;
  cursor: pointer;
}

.suggestion-item.selected, .suggestion-item:hover {
  padding-left: 16px;
  background-color: $light-grey;
  border-left: 5px solid $cyan;
  @include rz-box-sizing-border;
}

.suggestion td{
  position:fixed;

}

.ui-helper-hidden-accessible{
  position:fixed;
  top: $three-baselines+$four-baselines+$four-baselines+35px+$three-baselines;
  left:$doc-margin+8px;
  text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
  font-size:16px;
}

.ui-helper-hidden-accessible > div {
    color: $dark-grey;
}

.analyser-span-node {
    color: blue;
}

.analyser-span-link {
    color: red;
}

.analyser-span-space-node-link {
    color: red;
}

.analyser-span-space-link-node {
    color: blue;
}

.input-help-text {
    color: $mid-grey;
}