@mantine/core/styles/Tree.layer.css

React components library focused on usability, accessibility and developer experience

@layer mantine {:where([data-tree-root]) {
  --level-offset: var(--mantine-spacing-lg);
  --tree-line-width: calc(0.0625rem * var(--mantine-scale));
  --tree-line-color: var(--mantine-color-default-border);
}

.m_f698e191 {
  margin: 0;
  padding: 0;
  user-select: none;
}

.m_75f3ecf {
  margin: 0;
  padding: 0;
}

.m_f6970eb1 {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
  outline: 0;
}

.m_f6970eb1:focus-visible > .m_dc283425 {
      outline: 2px solid var(--mantine-primary-color-filled);
      outline-offset: 2px;
    }

.m_dc283425 {
  position: relative;
  padding-inline-start: var(--label-offset);
}

:where([data-mantine-color-scheme='light']) .m_dc283425:where([data-selected]) {
      background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
      background-color: var(--mantine-color-dark-5);
}

.m_dc283425:where([data-dragging]) {
    opacity: 0.4;
  }

.m_dc283425:where([data-drag-over='before'])::before {
    content: '';
    position: absolute;
    top: -1px;
    inset-inline-start: var(--label-offset, 0);
    inset-inline-end: 0;
    height: 2px;
    background-color: var(--mantine-primary-color-filled);
    pointer-events: none;
    z-index: 1;
  }

.m_dc283425:where([data-drag-over='after'])::after {
    content: '';
    position: absolute;
    bottom: -1px;
    inset-inline-start: var(--label-offset, 0);
    inset-inline-end: 0;
    height: 2px;
    background-color: var(--mantine-primary-color-filled);
    pointer-events: none;
    z-index: 1;
  }

.m_dc283425:where([data-drag-over='inside']) {
    background-color: var(--mantine-primary-color-light);
  }

:where([data-with-lines]) .m_f6970eb1 {
    position: relative;
  }

/* Horizontal connector at the node's own level — applies to both nested and flat layouts */

:where([data-with-lines]) .m_f6970eb1:not([data-level='1'])::before {
    content: '';
    position: absolute;
    top: calc(0.75rem * var(--mantine-scale));
    inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
    width: calc(var(--level-offset) / 2);
    height: 0;
    border-top: var(--tree-line-width) solid var(--tree-line-color);
    pointer-events: none;
    z-index: 1;
  }

/* Vertical line for nested layout (regular Tree): the line spans the parent <li>'s
     full height — including descendants — so ancestor columns stay continuous. */

:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
      width: 0;
      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
      pointer-events: none;
      z-index: 1;
    }

:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
      bottom: auto;
      height: calc(0.75rem * var(--mantine-scale));
    }

:where([data-with-lines]) .m_f6970eb1:where([data-dragging])::before,
    :where([data-with-lines]) .m_f6970eb1:where([data-dragging])::after {
      display: none;
    }

:where([data-with-lines]) .m_f6970eb1:where([data-dragging]) .m_c03b303c {
      display: none;
    }

/* Vertical line markers rendered as DOM children by `FlatTreeNode` for flat layouts
   (e.g. virtualized trees) where ::after on a single node can't span ancestor rows.
   Each marker is positioned at column `--flat-line-column` and is only visible
   inside a `[data-with-lines]` tree. */
.m_c03b303c {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  inset-inline-start: calc((var(--flat-line-column) - 1.5) * var(--level-offset));
  border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
  pointer-events: none;
  z-index: 1;
  display: none;
}

:where([data-with-lines]) .m_c03b303c {
  display: block;
}

.m_bf7448d9 {
  bottom: auto;
  height: calc(0.75rem * var(--mantine-scale));
}
}