/*
 * This file is part of the Access to Memory (AtoM) software.
 *
 * Access to Memory (AtoM) 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.
 *
 * Access to Memory (AtoM) 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 General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Access to Memory (AtoM).  If not, see <http://www.gnu.org/licenses/>.
 */

@treeviewNodeBg: transparent;
@treeviewNodeFg: @linkColor;
@treeviewActiveNodeBg: darken(@grayLighter, 20%);
@treeviewActiveNodeFg: @white;
@treeviewAncestorNodeBg: darken(@grayLighter, 5%);
@treeviewPlaceholderBg: #f0f0f0;

#treeview {
  max-height: 480px;
  overflow: auto;
  overflow-x: hidden;
  background-color: #eee;
}

/* Treeview header */

#treeview-header p {
  font-family: @sansFontFamily;
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: normal;
  font-size: 20px;
  margin: 0;
  padding: 4px 4px 6px 6px;
  position: relative;
  background-color: @grayLight;
  color: @white;
}

/* List elements */

#treeview ul,
#treeview li {
  margin: 0;
  padding: 0;
}

#treeview li {
  padding: 5px 0 5px 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  background-color: @treeviewNodeBg;
}

/* Loading status */

#treeview.loading li {
  cursor: wait !important;
}

#treeview li .loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../../../../images/loading.small.gif);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  left: 0px;
}

/* Tree node properties */

#treeview .active {
  background-color: @treeviewActiveNodeBg !important;
  a {
    color: @treeviewActiveNodeFg;
  }
}

#treeview .expand,
#treeview .ancestor {
  padding-left: 0px;
}

#treeview .ancestor {
  background-color: @treeviewAncestorNodeBg;
}

/* Treeview drag-n-drop */

#treeview .grip {
  visibility: hidden;
  float: right;
  width: 9px;
  height: 11px;
  margin-right: 4px;
  margin-top: 4px;
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  background-image: url(../../../../images/grip.png);
  background-repeat: no-repeat;
}

#treeview li:hover .grip {
  visibility: visible;
}

#treeview .placeholder {
  background-color: @treeviewPlaceholderBg;
}

#treeview .ui-sortable-helper {
  background-color: @white;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid @grayLight;
  @shadow: 2px 2px 2px rgba(0, 0, 0, .2);
  .box-shadow(@shadow);
}

/* Show siblings button */

#treeview .more a {
  padding: 0 8px;
  font-weight: bold;
  background-color: darken(@grayLighter, 20%);
  color: @white;
  text-decoration: none;
  .border-radius(4px);
}

/* Node arrows */

#treeview i {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  margin-right: 2px;
  margin-left: 5px;
  background-color: transparent;
  background-image: url(../../../../images/arrow-sprites.png);
  background-repeat: no-repeat;
}

#treeview .root i {
  cursor: default !important;
}

#treeview .ancestor i,
#treeview .expand i {
  cursor: pointer;
}

#treeview .ancestor i { background-position: 0px 0px; } /* down arrow */
#treeview .ancestor:hover i { background-position: -20px 0px; } /* right arrow */
#treeview .expand i { background-position: -20px 0px; } /* right arrow */
#treeview .expand:hover i { background-position: 0px 0px; } /* down arrow */
#treeview .root:hover i { background-position: 0px 0px; } /* down arrow */

#treeview .levelOfDescription {
  margin-right: 4px;
  line-height: 1;
}

#treeview .pubStatus {
  color: #bbb;
  margin-left: 4px;
}

#treeview-menu {

  margin-top: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid @gray;

  li {
    margin-bottom: 0;
  }

  li > a {
    padding: 4px 6px;
    background-color: @grayLighter;
    color: lighten(@black, 50%);
  }

  .active > a {
    background-color: transparent;
    color: @black;
  }

  i {
    margin-right: 4px;
  }

}

#treeview-search {

  form,
  button,
  input {
    margin: 0;
    border: 0;
  }

  #field-options {
    background-color: rgba(0, 0, 0, .1);
    position: relative;
    padding: 0 10px 1px 10px;

    ul {
      background-color: rgba(0, 0, 0, .2);
      list-style: none;
      padding: 5px 10px;
      margin-left:0;
      border-radius: 4px;
    }

    label {
      display: inline;
      position: relative;
      color: @white;
    }

    input[type="radio"] {
      margin-right: 10px;
    }

  }


  .search-box {
    padding: 14px 10px;
    background-color: rgba(0, 0, 0, .1);
    position: relative;

    input {
      background-color: rgba(0, 0, 0, .2);
      .placeholder(#fff);
      color: @white;
      padding: 0 32px;
    }

    button {
      position: absolute;
      top: 17px;
      bottom: 17px;
      background-color: rgba(255, 255, 255, .1);
      .border-radius(4px);
      color: @white;
    }

    button[type="submit"] {
      right: 13px;
      font-size: 12px;
    }

    button#treeview-search-settings {
      left: 13px;
      font-size: 14px;
    }

  }

  .list-menu {
    .animation(fadeInDown, .2s);
    display: none;
    &.open {
      display: block;
    }
  }

  .no-results {
    border-top: 1px solid @white;
    background-color: rgba(0, 0, 0, .3);
    color: @white;
    padding: 4px 8px;
  }

}

// List tab in term treeview

#treeview-list {
  background-color: @grayLighter;

  > ul {
    list-style: none;
    margin-left: -15px;

    > li {
      padding: 5px 5px 5px 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      font-size: 13px;
    }
  }

  .pager li > a {
    font-size: 10px;
    padding: 3px 8px;
    margin: 0 5px 5px -20px;
  }

}

#treeview-search:not(.force-show),
#treeview-list {
  .hide();
}
