
.document-tree {
  --tree-font-size:          16px;
  --tree-line-height:        calc(var(--tree-font-size)*1.25);
  --tree-level-padding:      calc(var(--tree-font-size)*1.5);
  --tree-cell-padding:       calc(var(--tree-font-size)*0.5);

  --tree-level-line-width:   1px;

  --tree-color-line:         var(--color-accent,      #274466);
  --tree-color-fg:           var(--color-fg-main,     #444444);
  --tree-color-bg:           var(--color-bg-main,     #F2F5F9);
  --tree-color-row-hover-bg: var(--color-bg-contrast, #FFFFFF);
  --tree-btn-bg-color:       var(--color-bg-contrast, #FFFFFF);

  --tree-half-sell-height:   calc( var(--tree-line-height)/2 + var(--tree-cell-padding) );
}

h1.document-title,
.document-title {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  font-size: 2em;
  margin-top: 0;
  color: var(--color-text-main);
}

.document-tree {
  padding: calc(var(--base-gap) * 2);
}

.document-tree * {
  box-sizing: border-box;
  line-height: var(--tree-line-height);
  font-size: var(--tree-font-size);
}

/* table */
.document-tree_table {
  display: table;
  padding-left: calc(var(--tree-level-padding) / 2);
}

.document-tree_table ul,
.document-tree_table li {
  display: contents;
  position: relative;
}

.document-tree_row {
  display: table-row;
  padding-left: calc(var(--tree-level-padding) / 2);
  position: relative;
}

.document-tree_cell {
  display: table-cell;
  vertical-align: top;
  position: relative;
  padding-top: var(--tree-cell-padding);
  padding-bottom: var(--tree-cell-padding);

  color: var(--tree-color-fg);
}

/* content */

.document-tree_folder {
  position: relative;
  display: inline-block;
  font-weight: bold;
  white-space: nowrap;
}

.document-tree_folder::before {
  content: "\25B0";
  position: relative;
  z-index: 2;
  display: inline-block;
  text-align: center;
  width: var(--tree-line-height);
  height: var(--tree-line-height);
  margin-left: calc(var(--tree-line-height) * (-0.5));
}

.document-tree_file,
.document-tree_file-name {
  margin-right: var(--tree-font-size);
}

.document-tree_file-link {
  margin-right: var(--tree-cell-padding);
  display: flex;
  align-items: center;
}

/* btn-small */

.button_small {
  white-space: nowrap;
  text-decoration: none;

  display: inline-flex;
    align-items: center;
  padding: 0 8px ;
  border-radius: 1em;
  background-color: rgb(249, 249, 249);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 0 rgba(0,0,0,0.2);

  font-size: 11px;
  font-weight: bold;
  line-height: 2;
  text-transform: uppercase;
  color: var(--color-accent);

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}

.button_small:hover {
  background-color: #fff;
  box-shadow: 0 0 16px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* levels */

.document-tree_level_1 .document-tree_cell:first-child,
.document-tree_level_1 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 1);
}
.document-tree_level_2 .document-tree_cell:first-child,
.document-tree_level_2 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 2);
}
.document-tree_level_3 .document-tree_cell:first-child,
.document-tree_level_3 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 3);
}
.document-tree_level_4 .document-tree_cell:first-child,
.document-tree_level_4 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 4);
}
.document-tree_level_5 .document-tree_cell:first-child,
.document-tree_level_5 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 5);
}
.document-tree_level_6 .document-tree_cell:first-child,
.document-tree_level_6 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 6);
}
.document-tree_level_7 .document-tree_cell:first-child,
.document-tree_level_7 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 7);
}
.document-tree_level_8 .document-tree_cell:first-child,
.document-tree_level_8 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 8);
}
.document-tree_level_9 .document-tree_cell:first-child,
.document-tree_level_9 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 9);
}
.document-tree_level_10 .document-tree_cell:first-child,
.document-tree_level_10 .level-branch {
  padding-left: calc(var(--tree-level-padding) * 10);
}

.level-branch {
  position: absolute;
  left: auto;
  left: 0;
  bottom: 0;
  top: calc(var(--tree-half-sell-height)*(-1));
  background-image: linear-gradient(90deg,
                    var(--tree-color-line) var(--tree-level-line-width),
                    transparent var(--tree-level-line-width));
  background-size: var(--tree-level-padding) 100%;
}

.level-branch::after {
  content: '';
  position: absolute;
  width: var(--tree-level-padding);
  top: calc(var(--tree-half-sell-height)*2);
  bottom: 0;
  right: 0;
  background-color: transparent;
  border-top: var(--tree-level-line-width) solid var(--tree-color-line);
}

li li:last-child .level-branch::after {
  background-color: var(--tree-color-bg);
}

li:last-child li .level-branch::before {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 0;
  right: calc(var(--tree-level-padding));
  background-color: var(--tree-color-bg);
}

/* hover on row */

.document-tree_row:hover .document-tree_cell,
li:last-child .document-tree_row:hover .level-branch::after {
  background-color: var(--tree-color-row-hover-bg);
  color: var(--color-fg-contrast);
}
