/* Edge-Frfox - tree.css */

/* Change height of tree items and add rounded corners */
treechildren::-moz-tree-row,
treecol:not([hideheader="true"]),
.tree-columnpicker-button {
  min-height: max(28px, 1.3em) !important;
  border-radius: 2px !important;
}

/* Change the background colour on hover */
@media not (prefers-contrast) {
  treechildren::-moz-tree-row(hover) {
    background-color: var(--toolbarbutton-hover-background) !important;
  }
}

/* Change the background colour when pressed */
treechildren::-moz-tree-row(selected) {
  background-color: var(--toolbarbutton-active-background) !important;
}

/* Change the background colour when focused */
treechildren::-moz-tree-row(selected, focus) {
  background-color: var(--button-primary-bgcolor) !important;
}

treechildren::-moz-tree-row(current, focus) {
  outline: var(--default-focusring);
  outline-color: var(--button-primary-bgcolor) !important;
  outline-offset: calc(-1 * var(--default-focusring-width));
}

treechildren::-moz-tree-image(selected),
treechildren::-moz-tree-twisty(selected),
treechildren::-moz-tree-cell-text(selected) {
  color: inherit !important;
}

treechildren::-moz-tree-image(selected, focus),
treechildren::-moz-tree-twisty(selected, focus),
treechildren::-moz-tree-cell-text(selected, focus) {
  color: var(--button-primary-color) !important;
}

/* Spacing between icon and label */
treechildren::-moz-tree-image {
  margin-inline-end: 8px !important;
}

/* Separator appearance */
treechildren::-moz-tree-separator {
  border-top: 1px solid var(--toolbarseparator-color) !important;
  border-bottom: none !important;
}

/* Change the colour of the drop feedback elements */
treechildren::-moz-tree-cell-text(primary, dropOn) {
  background-color: var(--button-primary-bgcolor) !important;
  color: var(--button-primary-color) !important;
}

treechildren::-moz-tree-drop-feedback {
  background-color: var(--toolbarbutton-icon-fill-attention) !important;
  border-radius: 2px !important;
}

/* Change the appearance for the expandable items */
treechildren::-moz-tree-twisty {
  padding-top: 0 !important;
  padding-inline: 4px !important;
  width: 16px !important;
  list-style-image: url("../icons/arrow-filled-right.svg") !important;
}

treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
  list-style-image: url("../icons/arrow-filled-left.svg") !important;
}

treechildren::-moz-tree-twisty(open) {
  list-style-image: url("../icons/arrow-filled-down.svg") !important;
}

/* Change the identation of child items */
treechildren::-moz-tree-indentation {
  width: 16px !important;
}