/*
 * "ooTreeInputView" is a custom internal selector (like a namespace) to avoid
 * duplication and interference with other styles external definitions
*/
.ooTreeInputView-decoration {
  color: #000;
  text-decoration: none;
}
/*
 * Find the tag where
 * [aria-expanded="false"] and some nested tag (non only the direct children or first level children)
 * with "expanded" class style
 * or
 * [aria-expanded="true"] and some nested tag (non only the direct children or first level children)
 * with "collpased" class style
*/
.ooTreeInputView[aria-expanded="false"] .expanded,
.ooTreeInputView[aria-expanded="true"] .collapsed {
  display: none;
}
/*
 * Riga del nodo: contiene il toggle di espansione (+/-) e il link del nodo affiancati.
 * Il toggle è separato dal link perché il click sull'icona deve SOLO espandere/comprimere il ramo,
 * mentre il click sul nome seleziona il nodo (vedi OOTreeView.razor).
*/
.ooTreeInputView-noderow {
  display: flex;
  align-items: center;
  /* il link del nodo occupa tutto lo spazio restante della riga: l'evidenziazione della selezione
       e l'area cliccabile del nome restano a piena larghezza (come prima dello scorporo del toggle) */
}
.ooTreeInputView-noderow > a {
  flex: 1 1 auto;
  min-width: 0;
}
.ooTreeInputView-toggle {
  cursor: pointer;
  /* stacca l'icona +/- dall'icona/etichetta del nodo */
  margin-right: .3rem;
}
/*li.mt-auto > a:hover {*/
li.ooTreeInputView.mt-auto > a:hover,
li.ooTreeInputView.mt-auto > .ooTreeInputView-noderow:hover {
  /*background-color: #FCC;*/
  background-color: lightgray;
}
/*ul.list-group {*/
/*ul.ooTreeInputView.list-group {
    padding-left: 10px;
    margin-left: 20px;
}*/
/*@size: 400px;

.OOTree-max-size {
    width: @size;
    height: @size;
}*/
/*
 * Transizione di apertura/chiusura del ramo per gli alberi con espansione gestita dal server
 * (vedi TreeInput.ToggleNodeExpansion): in quella modalità il collapse js di bootstrap non
 * interviene, quindi l'animazione è puramente css.
 * NOTE: 'transition-behavior: allow-discrete' e '@starting-style' permettono di animare anche il
 *       passaggio da 'display:none' imposto da '.collapse:not(.show)' di bootstrap; sui browser
 *       che non li supportano il ramo si apre/chiude istantaneamente (nessuna regressione).
 * NOTE: lo scorrimento usa 'margin-top' e non 'transform' perché quest'ultimo creerebbe un
 *       containing block per gli eventuali discendenti in 'position: fixed'
 *       (vedi UnclipDropDownInScrollable di OODropDown).
*/
.ooTreeInputView-branch {
  transition: opacity .18s ease-out, margin-top .18s ease-out, display .18s allow-discrete;
}
.ooTreeInputView-branch:not(.show) {
  opacity: 0;
  margin-top: -.35rem;
}
.ooTreeInputView-branch.show {
  opacity: 1;
  margin-top: 0;
}
@starting-style {
  .ooTreeInputView-branch.show {
    opacity: 0;
    margin-top: -.35rem;
  }
}