@layer components {
  .bom_tree_summary {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-ink-lightest);
    border: var(--border);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
    cursor: pointer;
  }

  .bom_tree_details {
    border-radius: var(--radius-sm);
    border-left: solid 2px var(--blue-accent);
    background-color: var(--white);
  }

  .bom_tree_summary .bom_tree_icon_open,
  .bom_tree_summary .bom_tree_icon_closed {
    display: none;
  }

  .bom_tree_details:not([open]) > .bom_tree_summary > .bom_tree_icon_closed {
    display: inline-block;
  }

  .bom_tree_details[open] > .bom_tree_summary > .bom_tree_icon_open {
    display: inline-block;
  }
}