/* 
 * 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-structured-list-item-padding: var(--cbp-space-4x);
 * @prop --cbp-structured-list-item-color-bg: var(--cbp-color-white);
 * @prop --cbp-structured-list-item-color-bg-dark: var(--cbp-color-gray-cool-80);
 * @prop --cbp-structured-list-item-color-bg-striped: var(--cbp-color-gray-cool-4);
 * @prop --cbp-structured-list-item-color-bg-striped-dark: var(--cbp-color-gray-cool-90);
 * @prop --cbp-structured-list-item-color-bg-hover: var(--cbp-color-gray-cool-10);
 * @prop --cbp-structured-list-item-color-bg-hover-dark: var(--cbp-color-black);
 * @prop --cbp-structured-list-item-color: var(--cbp-color-text-darkest);
 * @prop --cbp-structured-list-item-color-dark: var(--cbp-color-text-lightest);
 * @prop --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
 * @prop --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
 * @prop --cbp-structured-list-header-color-bg: var(--cbp-color-gray-cool-30);
 * @prop --cbp-structured-list-header-color-bg-dark: var(--cbp-color-gray-cool-60);
 * @prop --cbp-structured-list-header-color: var(--cbp-color-text-darkest);
 * @prop --cbp-structured-list-header-color-dark: var(--cbp-color-text-lightest);
 * @prop --cbp-structured-list-footer-color-bg: var(--cbp-color-gray-cool-70);
 * @prop --cbp-structured-list-footer-color-bg-dark: var(--cbp-color-gray-cool-5);
 * @prop --cbp-structured-list-footer-color: var(--cbp-color-text-lightest);
 * @prop --cbp-structured-list-footer-color-dark: var(--cbp-color-text-darkest);
 * @prop --cbp-structured-list-item-color-bg-selected: var(--cbp-color-interactive-selected-light);
 * @prop --cbp-structured-list-item-color-bg-selected-dark: var(--cbp-color-interactive-selected-dark);
 * @prop --cbp-structured-list-margin-bottom: var(--cbp-space-4x);
*/
:root {
  --cbp-structured-list-item-padding: var(--cbp-space-4x);
  --cbp-structured-list-item-color-bg: var(--cbp-color-white);
  --cbp-structured-list-item-color-bg-dark: var(--cbp-color-gray-cool-80);
  --cbp-structured-list-item-color-bg-striped: var(--cbp-color-gray-cool-4);
  --cbp-structured-list-item-color-bg-striped-dark: var(--cbp-color-gray-cool-90);
  --cbp-structured-list-item-color-bg-hover: var(--cbp-color-gray-cool-10);
  --cbp-structured-list-item-color-bg-hover-dark: var(--cbp-color-black);
  --cbp-structured-list-item-color: var(--cbp-color-text-darkest);
  --cbp-structured-list-item-color-dark: var(--cbp-color-text-lightest);
  --cbp-structured-list-item-color-hover: var(--cbp-color-text-darkest);
  --cbp-structured-list-item-color-hover-dark: var(--cbp-color-text-lightest);
  --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
  --cbp-structured-list-header-color-bg: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-header-color-bg-dark: var(--cbp-color-gray-cool-60);
  --cbp-structured-list-header-color: var(--cbp-color-text-darkest);
  --cbp-structured-list-header-color-dark: var(--cbp-color-text-lightest);
  --cbp-structured-list-footer-color-bg: var(--cbp-color-gray-cool-70);
  --cbp-structured-list-footer-color-bg-dark: var(--cbp-color-gray-cool-5);
  --cbp-structured-list-footer-color: var(--cbp-color-text-lightest);
  --cbp-structured-list-footer-color-dark: var(--cbp-color-text-darkest);
  --cbp-structured-list-item-padding: var(--cbp-space-4x);
  --cbp-structured-list-margin-bottom: var(--cbp-space-4x);
  --cbp-structured-list-item-color-selected: var(--cbp-color-text-darkest);
  --cbp-structured-list-item-color-selected-dark: var(--cbp-color-text-lightest);
  --cbp-structured-list-item-color-bg-selected: var(--cbp-color-interactive-selected-light);
  --cbp-structured-list-item-color-bg-selected-dark: var(--cbp-color-interactive-selected-dark);
}

[data-cbp-theme=light] cbp-structured-list[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-structured-list:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-structured-list-item-color-bg: var(--cbp-structured-list-item-color-bg-dark) !important;
  --cbp-structured-list-item-color-bg-striped: var(--cbp-structured-list-item-color-bg-striped-dark) !important;
  --cbp-structured-list-item-color-bg-hover: var(--cbp-structured-list-item-color-bg-hover-dark) !important;
  --cbp-structured-list-item-color: var(--cbp-structured-list-item-color-dark) !important;
  --cbp-structured-list-item-color-hover: var(--cbp-structured-list-item-color-hover-dark) !important;
  --cbp-structured-list-border-color: var(--cbp-structured-list-border-color-dark) !important;
  --cbp-structured-list-header-color-bg: var(--cbp-structured-list-header-color-bg-dark) !important;
  --cbp-structured-list-header-color: var(--cbp-structured-list-header-color-dark) !important;
  --cbp-structured-list-item-color-selected: var(--cbp-structured-list-item-color-selected-dark) !important;
  --cbp-structured-list-item-color-bg-selected: var(--cbp-structured-list-item-color-bg-selected-dark) !important;
  --cbp-structured-list-footer-color-bg: var(--cbp-structured-list-footer-color-bg-dark) !important;
  --cbp-structured-list-footer-color: var(--cbp-structured-list-footer-color-dark) !important;
}

cbp-structured-list {
  display: block;
  color: var(--cbp-structured-list-item-color);
  margin-bottom: var(--cbp-structured-list-margin-bottom);
  /**Collection */
  /** Selectable */
}
cbp-structured-list [slot=cbp-structured-list-header] {
  color: var(--cbp-structured-list-header-color);
  background-color: var(--cbp-structured-list-header-color-bg);
  font-style: italic;
  display: flex;
  align-items: center;
  padding: var(--cbp-space-3x);
  min-height: var(--cbp-space-13x);
  font-weight: var(--cbp-font-weight-bold);
}
cbp-structured-list [slot=cbp-structured-list-header] *:only-child {
  flex-basis: 100%;
}
cbp-structured-list div[role=list] > * {
  display: block;
  padding: var(--cbp-structured-list-item-padding);
  border-bottom-style: solid;
  border-bottom-width: var(--cbp-border-size-md);
  border-bottom-color: var(--cbp-structured-list-border-color);
  background-color: var(--cbp-structured-list-item-color-bg);
  color: var(--cbp-structured-list-item-color);
}
cbp-structured-list div[role=list] > *:hover {
  --cbp-structured-list-item-color: var(--cbp-structured-list-item-color-hover) !important;
  --cbp-structured-list-item-color-bg: var(--cbp-structured-list-item-color-bg-hover) !important;
}
cbp-structured-list[striped=even] [role=list] > *:nth-child(even):not([color]):not(:has(input[type=checkbox]:checked)), cbp-structured-list[striped=odd] [role=list] > *:nth-child(odd):not([color]):not(:has(input[type=checkbox]:checked)) {
  --cbp-structured-list-item-color-bg: var(--cbp-structured-list-item-color-bg-striped);
}
cbp-structured-list div[role=list]:only-child > *:first-child {
  border-top: var(--cbp-border-size-md) solid var(--cbp-structured-list-border-color);
}
cbp-structured-list:has(input[type=checkbox]) [slot=cbp-structured-list-header] {
  gap: var(--cbp-space-4x);
}
cbp-structured-list div[role=list] cbp-structured-list-item:has(input[type=checkbox]),
cbp-structured-list div[role=list] li:has(input[type=checkbox]) {
  display: grid;
  grid-template-columns: var(--cbp-space-6x) 1fr;
  align-items: center;
  gap: var(--cbp-space-4x);
  background-color: var(--cbp-structured-list-item-color-bg);
}
cbp-structured-list div[role=list] cbp-structured-list-item:has(input[type=checkbox]) cbp-checkbox,
cbp-structured-list div[role=list] li:has(input[type=checkbox]) cbp-checkbox {
  --cbp-checkbox-min-height: 0;
  --cbp-checkbox-margin: 0;
}
cbp-structured-list cbp-structured-list-item:has(input[type=checkbox]:checked),
cbp-structured-list li:has(input[type=checkbox]:checked) {
  --cbp-structured-list-item-color: var(--cbp-structured-list-item-color-selected);
  --cbp-structured-list-item-color-bg: var(--cbp-structured-list-item-color-bg-selected);
  --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
}