/* docara-shell-source: runtime/component/tree-item/css/tree-item.css */
@layer sf.components {
  .sf-tree-item .sf-tree-item-container {
    gap: var(--sf-space-1\/3);
    gap: var(--sf-tree-item-container--gap, var(--sf-space-1\/3));
  }
  .sf-tree-item .sf-tree-item-name {
    color: var(--sf-primary);
    color: var(--sf-tree-item-name--color, var(--sf-primary));
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-tree-item-name--font-size, var(--sf-text-size-1));
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-tree-item-name--line-height, var(--sf-text-height-1));
  }
}
/* A glyph in a row is content, and content takes the row's colour. It was
   painted with a transparent overlay -- a state wash, 24% of a secondary -- so
   every icon in every tree stood at a quarter of the strength of the name
   beside it and read as disabled (owner, 2026-10-08). The token is here for a
   tree that wants something else. */
@layer sf.override {
  .sf-tree-item .sf-icon {
    --sf-icon--color: var(--sf-tree-item-icon--color, currentColor);
  }
}
/* A node a drag would drop on (sf-tree accept-records / accept-files): the
   primary container's fill and a dashed ring. */
@layer sf.states {
  .sf-tree-item[data-sf-drop-target] > .sf-tree-item-container {
    background-color: var(--sf-primary-container);
    outline: var(--sf-focus--width) dashed var(--sf-primary);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
}

/* docara-shell-source: runtime/component/tree/css/tree.css */
@layer sf.components {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tree {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-tree--padding-inline-start, var(--sf-space-1));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tree {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-tree--padding-inline-start, var(--sf-space-1));
    }
  }
  .sf-tree:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-tree--padding-inline-start, var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tree {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-tree--padding-inline-start, var(--sf-space-1));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-tree {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-tree--padding-inline-start, var(--sf-space-1));
    }
  }
  .sf-tree:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-tree--padding-inline-start, var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tree {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-tree--padding-inline-end, var(--sf-space-1));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-tree {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-tree--padding-inline-end, var(--sf-space-1));
    }
  }
  .sf-tree:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-tree--padding-inline-end, var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tree {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-tree--padding-inline-end, var(--sf-space-1));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-tree {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-tree--padding-inline-end, var(--sf-space-1));
    }
  }
  .sf-tree:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-tree--padding-inline-end, var(--sf-space-1));
  }
  .sf-tree {
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
    -webkit-padding-start: var(--sf-tree--padding-inline-start, var(--sf-space-1));
            padding-inline-start: var(--sf-tree--padding-inline-start, var(--sf-space-1));
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
    -webkit-padding-end: var(--sf-tree--padding-inline-end, var(--sf-space-1));
            padding-inline-end: var(--sf-tree--padding-inline-end, var(--sf-space-1));
    padding-top: var(--sf-space-1);
    padding-top: var(--sf-tree--padding-top, var(--sf-space-1));
    padding-bottom: var(--sf-space-1);
    padding-bottom: var(--sf-tree--padding-bottom, var(--sf-space-1));
    gap: var(--sf-space-1\/3);
    gap: var(--sf-tree--gap, var(--sf-space-1\/3));
  }
  .sf-tree .sf-tree-item {
    gap: var(--sf-space-1\/3);
    gap: var(--sf-tree-item--gap, var(--sf-space-1\/3));
    border-radius: var(--sf-radius--ui);
    color: var(--sf-on-surface);
    outline: none;
  }
  .sf-tree .sf-tree-group {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-1\/3);
    gap: var(--sf-tree-item--gap, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tree > .sf-tree-item .sf-tree-group {
    padding-left: var(--sf-space-3);
    padding-left: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-tree > .sf-tree-item .sf-tree-group {
    padding-left: var(--sf-space-3);
    padding-left: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
    }
  }
  .sf-tree > .sf-tree-item .sf-tree-group:where(:dir(ltr)) {
    padding-left: var(--sf-space-3);
    padding-left: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-tree > .sf-tree-item .sf-tree-group {
    padding-right: var(--sf-space-3);
    padding-right: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-tree > .sf-tree-item .sf-tree-group {
    padding-right: var(--sf-space-3);
    padding-right: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
    }
  }
  .sf-tree > .sf-tree-item .sf-tree-group:where(:dir(rtl)) {
    padding-right: var(--sf-space-3);
    padding-right: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
  }
  .sf-tree > .sf-tree-item .sf-tree-group {
    -webkit-padding-start: var(--sf-space-3);
            padding-inline-start: var(--sf-space-3);
    -webkit-padding-start: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
            padding-inline-start: var(--sf-tree-item--nested-padding-inline-start, var(--sf-space-3));
  }
  .sf-tree .sf-tree-item-container {
    gap: var(--sf-space-1\/2);
    gap: var(--sf-tree-item--container-gap, var(--sf-space-1\/2));
    min-height: var(--sf-b6);
    min-block-size: var(--sf-b6);
    min-height: var(--sf-b6);
    min-height: var(--sf-tree-item--min-block-size, var(--sf-b6));
    min-block-size: var(--sf-tree-item--min-block-size, var(--sf-b6));
    padding-top: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
    padding-block: var(--sf-space-1\/3);
    padding-top: var(--sf-space-1\/3);
    padding-top: var(--sf-tree-item--padding-block, var(--sf-space-1\/3));
    padding-bottom: var(--sf-space-1\/3);
    padding-bottom: var(--sf-tree-item--padding-block, var(--sf-space-1\/3));
    padding-block: var(--sf-tree-item--padding-block, var(--sf-space-1\/3));
    padding-left: var(--sf-space-1\/2);
    padding-right: var(--sf-space-1\/2);
    padding-inline: var(--sf-space-1\/2);
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-tree-item--padding-inline, var(--sf-space-1\/2));
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-tree-item--padding-inline, var(--sf-space-1\/2));
    padding-inline: var(--sf-tree-item--padding-inline, var(--sf-space-1\/2));
    border-radius: inherit;
  }
  /* Inside a tree a name takes its row's colour, a disabled row's muted one
     included. sf-tree-item's own rule (.sf-tree-item .sf-tree-item-name,
     primary) had the same weight, so which colour a name got depended on which
     stylesheet loaded last, and the disabled dimming never reached the name. */
  .sf-tree .sf-tree-item .sf-tree-item-name,
  .sf-tree .sf-tree-item-name {
    flex: 1 1 auto;
    min-width: 0;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
  }
  .sf-tree .sf-tree-item:not([aria-disabled=true]) > .sf-tree-item-container {
    cursor: pointer;
  }
  .sf-tree .sf-tree-item:not([aria-disabled=true]):hover > .sf-tree-item-container {
    background: var(--sf-surface-container-hover);
  }
  .sf-tree .sf-tree-item.active > .sf-tree-item-container,
  .sf-tree .sf-tree-item[aria-selected=true] > .sf-tree-item-container {
    background: var(--sf-surface-container-active);
  }
  .sf-tree .sf-tree-item.focus-visible > .sf-tree-item-container {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-tree .sf-tree-item:focus-visible > .sf-tree-item-container {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-tree .sf-tree-item.focus-visible > .sf-tree-item-container {
      outline: var(--sf-focus--width) solid Highlight;
      outline-offset: calc(var(--sf-focus--width) * -1);
    }
    .sf-tree .sf-tree-item:focus-visible > .sf-tree-item-container {
      outline: var(--sf-focus--width) solid Highlight;
      outline-offset: calc(var(--sf-focus--width) * -1);
    }
  }
  .sf-tree .sf-tree-item[aria-disabled=true] {
    color: var(--sf-on-surface-muted);
    cursor: not-allowed;
  }
  .sf-tree .sf-tree-chevron {
    flex: 0 0 var(--sf-icon-size-3);
  }
  /* A leaf keeps the chevron's column so names line up with the branches beside
     them. Where nothing in the tree can be opened there are no branches to line
     up with, and the column is an indent nobody chose: a list of destinations
     then starts a chevron's width in from its own edge. */
  .sf-tree .sf-tree-toggle-spacer {
    display: inline-block;
    flex: 0 0 var(--sf-icon-size-3);
    height: var(--sf-icon-size-3);
    block-size: var(--sf-icon-size-3);
    width: var(--sf-icon-size-3);
    inline-size: var(--sf-icon-size-3);
  }
  .sf-tree[data-sf-tree-flat=true] .sf-tree-toggle-spacer {
    display: none;
  }
  .sf-tree .sf-tree-chevron .sf-icon,
  .sf-tree .sf-tree-chevron.sf-icon {
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    pointer-events: none;
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
}
@layer sf.states {
  .sf-tree-item:not(.open) > .sf-tree-group,
  .sf-tree-item:not(.open) > .sf-tree-item {
    display: none;
  }
}
@layer sf.overrides {
  .sf-tree .sf-tree-item .sf-icon-button {
    --sf-icon-button--padding-bottom: 0;
    --sf-icon-button--padding-inline-end: 0;
    --sf-icon-button--padding-inline-start: 0;
    --sf-icon-button--padding-top: 0;
  }
  .sf-tree .sf-tree-item .sf-icon-button:hover {
    --sf-icon-button--background-color: var(--sf-transparent, transparent);
  }
}