/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-treeview-item-color: var(--cbp-color-text-darkest);
* @prop --cbp-treeview-item-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-treeview-item-indent: 0;
* @prop --cbp-treeview-indicator-spacing: 1.5rem;
* @prop --cbp-treeview-connection-width: 2px;
* @prop --cbp-treeview-connection-color: var(--cbp-color-gray-cool-20);
* @prop --cbp-treeview-connection-color-dark: var(--cbp-color-gray-cool-40);
* @prop --cbp-treeview-expand-width: var(--cbp-space-6x)
*/
:root {
  --cbp-treeview-item-color: var(--cbp-color-text-darkest);
  --cbp-treeview-item-color-dark: var(--cbp-color-text-lightest);
  --cbp-treeview-item-indent: 1.5rem;
  --cbp-treeview-indicator-spacing: 1.5rem;
  --cbp-treeview-connection-width: 2px;
  --cbp-treeview-connection-color: var(--cbp-color-gray-cool-20);
  --cbp-treeview-connection-color-dark: var(--cbp-color-gray-cool-40);
  --cbp-treeview-expand-width: var(--cbp-space-6x) ;
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-treeview-item[context*=dark],
[data-cbp-theme=dark] cbp-treeview-item:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-treeview-item-color: var(--cbp-treeview-item-color-dark) !important;
}

cbp-treeview-item {
  display: block;
  color: var(--cbp-treeview-item-color);
  margin-inline-start: calc((var(--cbp-treeview-expand-width) - var(--cbp-treeview-connection-width)) / 2);
}
cbp-treeview-item .cbp-treeview-item-control {
  --cbp-checkbox-margin: 0;
  display: inline-flex;
  width: 100%;
  min-height: var(--cbp-space-11x);
  align-items: center;
  font-weight: var(--cbp-font-weight-bold);
}
cbp-treeview-item .cbp-treeview-item-control .cbp-treeview-item-toggle {
  --cbp-button-height: var(--cbp-treeview-expand-width);
  --cbp-button-width: var(--cbp-treeview-expand-width);
  --cbp-button-min-height: var(--cbp-button-height) ;
}
cbp-treeview-item .cbp-treeview-item-control cbp-checkbox {
  flex-shrink: 1;
}
cbp-treeview-item .cbp-treeview-item-control cbp-checkbox label {
  padding-block: var(--cbp-space-1x);
}
cbp-treeview-item .cbp-treeview-item-control > * {
  flex-shrink: 0;
  margin-inline-end: var(--cbp-space-3x);
}
cbp-treeview-item .cbp-treeview-item-control [slot=cbp-treeview-item-buttons] {
  flex-grow: 1;
  text-align: right;
}
cbp-treeview-item .cbp-treeview-item-children {
  display: none;
}
cbp-treeview-item[open] > .cbp-treeview-item-control .cbp-treeview-item-toggle cbp-icon {
  transform: rotate(180deg);
}
cbp-treeview-item[open] > .cbp-treeview-item-children {
  display: block;
}
cbp-treeview[selectable=true] cbp-treeview-item:not(:has(.cbp-treeview-item-toggle)) {
  padding-inline-start: calc(var(--cbp-treeview-item-indent) + var(--cbp-treeview-expand-width));
}
cbp-treeview[selectable=true] cbp-treeview-item:not(:has(.cbp-treeview-item-toggle)) .cbp-treeview-item-control::before {
  left: calc((var(--cbp-treeview-connection-width) + var(--cbp-treeview-expand-width)) * -1);
  width: calc(var(--cbp-treeview-item-indent) + var(--cbp-treeview-expand-width));
}
cbp-treeview[selectable=true] cbp-treeview-item:not(:has(.cbp-treeview-item-toggle)) .cbp-treeview-item-control cbp-checkbox {
  margin-inline-start: calc(var(--cbp-treeview-expand-width) / 2 * -1);
}
cbp-treeview-item cbp-treeview-item {
  border-left: var(--cbp-treeview-connection-width) solid var(--cbp-treeview-connection-color);
  padding-inline-start: var(--cbp-treeview-item-indent);
}
cbp-treeview-item cbp-treeview-item .cbp-treeview-item-control::before {
  content: "";
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  top: calc(var(--cbp-treeview-indicator-spacing) / 2 * -1);
  left: calc(var(--cbp-treeview-connection-width) * -1);
  width: var(--cbp-treeview-item-indent);
  margin-inline-start: calc(var(--cbp-treeview-item-indent) * -1);
  min-height: calc(var(--cbp-treeview-indicator-spacing) + var(--cbp-treeview-connection-width));
  border: solid var(--cbp-treeview-connection-color);
  border-width: 0 0 var(--cbp-treeview-connection-width) 0;
}
cbp-treeview-item:last-child {
  border-image: linear-gradient(to bottom, var(--cbp-treeview-connection-color) 50%, transparent 50%) 1 100%;
}