/**
 * @file
 *
 * @brief stylesheet for the TreeView
 *
 * @copyright BSD License (see LICENSE.md or https://www.libelektra.org)
 */

/* Elements */
.ExplorerView ul {
  list-style: none;
  font-size: 14px;
  padding-top: 4px;
}
.ExplorerView ul > li {
  min-height: 48px;
  /* opacity: 0.8;
     TODO: this looks really cool as it provides a visual hierarchy.
           unfortunately, it can cause flickering for deeply nested keys.
  */
  transition: opacity 0.2s;
  cursor: pointer;
}
.ExplorerView ul > li:hover {
  opacity: 1;
}
.ExplorerView ul > li a .actions > button,
.ExplorerView ul > li a .actions > i,
.ExplorerView ul > li a .actions > span {
  opacity: 0;
  transition: opacity 0.2s;
}
.ExplorerView ul > li a .actions > i {
  margin-left: 1.5em;
}
.ExplorerView ul > li a .actions > i,
.ExplorerView ul > li a .actions > span {
  position: relative;
  bottom: 3px;
  margin-right: 1em;
}

/* when root element is hovered with mouse */
.ExplorerView ul > li a:hover .actions > button,
.ExplorerView ul > li a:hover .actions > i,
.ExplorerView ul > li a:hover .actions > span {
  opacity: 0.5;
}
/* when action button is focussed with keyboard or hovered with mouse */
.ExplorerView ul > li a .actions > button:focus,
.ExplorerView ul > li a .actions > button:hover {
  opacity: 1 !important;
}
.ExplorerView ul > li.category .opener {
  display: block;
  float: left;
  content: "";
  height: 1em;
  width: 2em;
}

/* Newer browsers */
@supports (mask: url('/folded.svg') no-repeat) {
  .ExplorerView ul > li.category .opener {
    mask: url('/folded.svg') no-repeat;
    background-color: #000000;
    transition: all 0.2s;
  }
  .ExplorerView ul li.selected > span.item > .opener,
  .ExplorerView ul li > span.item > .opener:focus {
    background-color: #00BCD4;
  }
  /* Animations on component creation / destruction */
  .ExplorerViewTransition-enter {
    transition: all .2s ease-in-out;
    opacity: 0;
    transform-origin: left top;
    transform: translateX(-20px) scale(0);
  }
  .ExplorerViewTransition-enter-active {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
  .ExplorerViewTransition-leave {
    transition: all .2s ease-in-out;
    transform-origin: left top;
  }
  .ExplorerViewTransition-leave-active {
    opacity: 0;
    transform: translateX(-20px) scale(0);
  }
  /* Selection animations */
  .ExplorerView ul li:not(.category) > span.item:before {
    transition: color 0.2s;
  }
  .ExplorerView ul > li > span.item {
    transition: color 0.2s;
  }
}

/* Older browsers, e.g. Firefox ESR */
@supports not (mask: url('/folded.svg') no-repeat) {
  .ExplorerView ul > li.category .opener {
    background-image: url('/folded.svg');
    background-repeat: no-repeat;
  }
}
.ExplorerView ul li:not(.category) > span.item:before {
  display: block;
  float: left;
  content: "•";
  min-height: 48px;
  height: 100%;
  width: 2em;
  color: #000000;
  position: relative;
  top: 16px;
  left: 2px;
}
.ExplorerView ul > li:not(.category) > span.item > a {
  min-height: 48px;
}
.ExplorerView > input[type="search"] {
  display: none; /* hide filter */
}
input[type="search"] {
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  margin-bottom: 8px;
  padding: 16px;
  padding-left: 48px;
  font-family: Roboto;
  font-size: 14px;
  background: url('/search.svg') no-repeat;
  background-position: 16px center;
  background-color: #FAFAFA;
  transition: box-shadow 0.5s;
}

input[type="search"] {
  outline-width: 2px;
}

@keyframes glow {
  from {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  }
  to {
    box-shadow: rgba(0, 188, 212, 0.5) 0px 1px 12px, rgba(0, 188, 212, 0.5) 0px 1px 8px;
  }
}

input[type="search"].loading {
  animation: glow 0.5s infinite alternate;
}

input[type="search"].success {
  box-shadow: rgba(0, 188, 212, 0.5) 0px 1px 12px, rgba(0, 188, 212, 0.5) 0px 1px 8px;
}

input[type="search"].error {
  box-shadow: rgba(255, 64, 129, 0.5) 0px 1px 12px, rgba(255, 64, 129, 0.5) 0px 1px 8px;
}

/* Root list */
.ExplorerView ul.depth-0:empty::before {
  font-size: 1.1em;
  color: rgba(0, 0, 0, 0.6);
  content: 'No results found in the currently opened keys.';
}

/* Not disabled */
.ExplorerView ul li:not(.disabled) {}
.ExplorerView ul li:not(.disabled) > span.item {}

/* Selected */
.ExplorerView ul li.selected {}
.ExplorerView ul li.selected > span.item {
  color: #00BCD4;
}
.ExplorerView ul li.selected:not(.category) > span.item:before {
  color: #00BCD4;
}

/* Categories : Nodes with children */
.ExplorerView ul li.category {
  box-sizing: border-box;
  padding-top: 12px;
}
.ExplorerView ul li.category > span.item > .opener {
  margin-top: 3px;
}
/* Folded */
.ExplorerView ul li.category.folded > span.item > .opener {}
.ExplorerView ul li.category.folded {}
.ExplorerView ul li.category.folded > span.item {}
/* Unfolded */
.ExplorerView ul li.category:not(.folded) > span.item > .opener {
  mask-position: bottom left;
  background-position: bottom left;
  transform: translate(28px, 2px) rotate(90deg);
  transform-origin: left top;
}
.ExplorerView ul li.category:not(.folded) {}
.ExplorerView ul li.category:not(.folded) > span.item {}
/* Opener */
.ExplorerView ul li.category > span.item > .opener {
  width: 28px !important;
  height: 28px !important;
}
.ExplorerView ul li.category > span.item > .opener::after {}
/* Folded async */
.ExplorerView li.category.async {}
.ExplorerView li.category.async > span.item {}
/* Loading async */
.ExplorerView li.category.loading {}
.ExplorerView li.category.loading > span.item {}

/* Drag'n'drop */
.ExplorerView ul.dragover {}
.ExplorerView li.dragover {}
.ExplorerView li.dragover > span.item {}
.ExplorerView li.nodrop {}
.ExplorerView li.nodrop > span.item {}
