.nil { width: 100%; }
.nil-list,
.nil-children { list-style: none; margin: 0; padding: 0; }

.nil-list > li { margin-bottom: 12px; border-bottom: 0 solid transparent; }
.nil-parent { display: flex; align-items: center; gap: 10px; position: relative; }
.nil-icon { min-width: 1.1em; text-align: center; line-height: 1; }
.nil-text a { text-decoration: none; }

.nil-children { margin-left: 28px; margin-top: 8px; }
.nil-children .nil-child { display: flex; align-items: center; gap: 8px; }
.nil-child-icon { line-height: 1; }

@media (max-width: 767.98px){
  .nil .nil-item.has-children .nil-children{
    overflow: hidden;
    max-height: 0;                
    transition: max-height .25s ease;
  }
  .nil .nil-item.open .nil-children{
  }
}

.nil-caret{
  margin-left: auto;
  width: 10px; height: 10px;
  display: inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

@media (min-width: 768px){
  .nil .nil-item .nil-children { display: block !important; max-height: none !important; overflow: visible !important; }
  .nil .nil-item .nil-caret { display: none; }
}

@media (max-width: 767.98px){
  .nil .nil-item.open .nil-caret { transform: rotate(45deg); }
  .nil .nil-parent { cursor: pointer; }
}

.nil-children .nil-child a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.nil-children .nil-child a,
.nil-children .nil-child .nil-child-text,
.nil-children .nil-child .nil-child-icon{
  transition: color .15s ease, text-decoration-color .15s ease;
}