/* 
 * 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-table-color: var(--cbp-color-text-darkest);
* @prop --cbp-table-color-dark: var(--cbp-color-text-lightest);

* @prop --cbp-table-header-color: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-table-header-color-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-table-header-color-hover: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-table-header-color-hover-dark: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-table-header-color-focus: var(--cbp-color-text-lightest);
* @prop --cbp-table-header-color-focus-dark: var(--cbp-color-text-darkest);
* @prop --cbp-table-header-color-active: var(--cbp-color-text-darkest);
* @prop --cbp-table-header-color-active-dark: var(--cbp-color-text-darkest);

* @prop --cbp-table-header-color-bg: var(--cbp-color-gray-cool-20);
* @prop --cbp-table-header-color-bg-dark: var(--cbp-color-gray-cool-60);
* @prop --cbp-table-header-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-table-header-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-table-header-color-bg-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-table-header-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-table-header-color-bg-active: var(--cbp-color-interactive-active-dark);
* @prop --cbp-table-header-color-bg-active-dark: var(--cbp-color-interactive-active-light);

* @prop --cbp-table-header-color-outline: var(--cbp-color-white);
* @prop --cbp-table-header-color-outline-dark: var(--cbp-color-black);

* @prop --cbp-table-row-color-bg: var(--cbp-color-white);
* @prop --cbp-table-row-color-bg-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-table-row-color-bg-striped: var(--cbp-color-gray-cool-4);
* @prop --cbp-table-row-color-bg-striped-dark: var(--cbp-color-gray-cool-80);
* @prop --cbp-table-row-color-bg-hover: var(--cbp-color-gray-cool-10);
* @prop --cbp-table-row-color-bg-hover-dark: var(--cbp-color-gray-cool-90);
* @prop --cbp-table-row-color-bg-selected: var(--cbp-color-interactive-selected-light);
* @prop --cbp-table-row-color-bg-selected-dark: var(--cbp-color-interactive-selected-dark);
* @prop --cbp-table-color-bg-danger: var(--cbp-color-danger-lighter);
* @prop --cbp-table-color-bg-danger-dark: var(--cbp-color-danger-darker);
* @prop --cbp-table-row-color-bg-highlight: var(--cbp-color-highlight);

* @prop --cbp-table-row-color-border: var(--cbp-color-gray-cool-30);
* @prop --cbp-table-row-color-border-dark: var(--cbp-color-gray-cool-50);
* @prop --cbp-table-row-border-size: var(--cbp-border-size-md); 

* @prop --cbp-table-cell-padding: var(--cbp-space-4x) var(--cbp-space-3x);
* @prop --cbp-table-linearized-cell-padding: var(--cbp-space-2x) var(--cbp-space-3x);
*/
:root {
  --cbp-table-color: var(--cbp-color-text-darkest);
  --cbp-table-color-dark: var(--cbp-color-text-lightest);
  --cbp-table-header-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-table-header-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-table-header-color-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-table-header-color-hover-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-table-header-color-focus: var(--cbp-color-text-lightest);
  --cbp-table-header-color-focus-dark: var(--cbp-color-text-darkest);
  --cbp-table-header-color-active: var(--cbp-color-text-darkest);
  --cbp-table-header-color-active-dark: var(--cbp-color-text-darkest);
  --cbp-table-header-color-bg: var(--cbp-color-gray-cool-20);
  --cbp-table-header-color-bg-dark: var(--cbp-color-gray-cool-60);
  --cbp-table-header-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-table-header-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-table-header-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-table-header-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-table-header-color-bg-active: var(--cbp-color-interactive-active-dark);
  --cbp-table-header-color-bg-active-dark: var(--cbp-color-interactive-active-light);
  --cbp-table-header-color-outline: var(--cbp-color-white);
  --cbp-table-header-color-outline-dark: var(--cbp-color-black);
  --cbp-table-row-color-bg: var(--cbp-color-white);
  --cbp-table-row-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-table-row-color-bg-striped: var(--cbp-color-gray-cool-4);
  --cbp-table-row-color-bg-striped-dark: var(--cbp-color-gray-cool-80);
  --cbp-table-row-color-bg-hover: var(--cbp-color-gray-cool-10);
  --cbp-table-row-color-bg-hover-dark: var(--cbp-color-gray-cool-90);
  --cbp-table-row-color-bg-selected: var(--cbp-color-interactive-selected-light);
  --cbp-table-row-color-bg-selected-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-table-color-bg-danger: var(--cbp-color-danger-lighter);
  --cbp-table-color-bg-danger-dark: var(--cbp-color-danger-darker);
  --cbp-table-row-color-bg-highlight: var(--cbp-color-highlight);
  --cbp-table-row-color-border: var(--cbp-color-gray-cool-30);
  --cbp-table-row-color-border-dark: var(--cbp-color-gray-cool-50);
  --cbp-table-row-border-size: var(--cbp-border-size-md);
  --cbp-table-cell-padding: var(--cbp-space-4x) var(--cbp-space-3x);
  --cbp-table-linearized-cell-padding: var(--cbp-space-2x) var(--cbp-space-3x);
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-table[context*=dark],
[data-cbp-theme=dark] cbp-table:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-table-color: var(--cbp-table-color-dark) !important;
  --cbp-table-header-color: var(--cbp-table-header-color-dark) !important;
  --cbp-table-header-color-hover: var(--cbp-table-header-color-hover-dark) !important;
  --cbp-table-header-color-focus: var(--cbp-table-header-color-focus-dark) !important;
  --cbp-table-header-color-active: var(--cbp-table-header-color-active-dark) !important;
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-dark) !important;
  --cbp-table-header-color-bg-hover: var(--cbp-table-header-color-bg-hover-dark) !important;
  --cbp-table-header-color-bg-focus: var(--cbp-table-header-color-bg-focus-dark) !important;
  --cbp-table-header-color-bg-active: var(--cbp-table-header-color-bg-active-dark) !important;
  --cbp-table-header-color-outline: var(--cbp-table-header-color-outline-dark) !important;
  --cbp-table-row-color-bg: var(--cbp-table-row-color-bg-dark) !important;
  --cbp-table-row-color-bg-striped: var(--cbp-table-row-color-bg-striped-dark) !important;
  --cbp-table-row-color-bg-hover: var(--cbp-table-row-color-bg-hover-dark) !important;
  --cbp-table-row-color-bg-selected: var(--cbp-table-row-color-bg-selected-dark) !important;
  --cbp-table-color-bg-danger: var(--cbp-table-color-bg-danger-dark) !important;
  --cbp-table-row-color-border: var(--cbp-table-row-color-border-dark) !important;
}

cbp-table {
  display: block;
  max-width: 100%;
}
cbp-table .cbp-table-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--cbp-space-2x);
  width: 100%;
  margin-block-end: var(--cbp-space-2x);
}
cbp-table .cbp-table-toolbar-scroll {
  display: none;
  flex-grow: 1;
  text-align: end;
}
cbp-table.cbp-table-scroll .cbp-table-toolbar-scroll {
  --cbp-button-border-radius: 0;
  display: block;
}
cbp-table.cbp-table-scroll .cbp-table-wrapper {
  position: relative;
  overflow-x: scroll;
  mask: linear-gradient(to right, rgba(0, 0, 0, 0.2), white var(--left-fade) calc(100% - var(--right-fade)), rgba(0, 0, 0, 0.2));
  animation: scrollfade;
  animation-timeline: --scrollfade;
  scroll-timeline: --scrollfade x;
}
cbp-table.cbp-table-scroll table:has(tbody th:first-child) th:first-child {
  position: sticky;
  left: 0;
  inset-inline-start: 0;
}
cbp-table.cbp-table-linearize thead {
  display: none;
}
cbp-table.cbp-table-linearize td, cbp-table.cbp-table-linearize th {
  display: block;
  padding: var(--cbp-table-linearized-cell-padding);
}
cbp-table.cbp-table-linearize tbody td:not(:has(cbp-checkbox))::before {
  content: attr(data-column-header);
  font-weight: var(--cbp-font-weight-medium);
}
cbp-table .cbp-table-wrapper table tbody tr.cbp-table--danger td, cbp-table .cbp-table-wrapper table tbody tr.cbp-table--danger th,
cbp-table .cbp-table-wrapper table tbody tr td.cbp-table--danger,
cbp-table .cbp-table-wrapper table tbody tr th.cbp-table--danger {
  background-color: var(--cbp-table-color-bg-danger);
}
cbp-table .cbp-table-wrapper table tbody tr.cbp-table--highlight td, cbp-table .cbp-table-wrapper table tbody tr.cbp-table--highlight th,
cbp-table .cbp-table-wrapper table tbody tr td.cbp-table--highlight,
cbp-table .cbp-table-wrapper table tbody tr th.cbp-table--highlight {
  color: var(--cbp-color-text-darkest);
  background-color: var(--cbp-table-row-color-bg-highlight);
}
cbp-table[striped=odd] tbody tr:nth-child(odd) td, cbp-table[striped=odd] tbody tr:nth-child(odd) th {
  background-color: var(--cbp-table-row-color-bg-striped);
}
cbp-table[striped=even] tbody tr:nth-child(even) td, cbp-table[striped=even] tbody tr:nth-child(even) th {
  background-color: var(--cbp-table-row-color-bg-striped);
}
cbp-table[hover=row] tbody tr:hover th, cbp-table[hover=row] tbody tr:hover td {
  background-color: var(--cbp-table-row-color-bg-hover);
}
cbp-table[hover=row] tbody tr:hover td.cbp-table--highlight, cbp-table[hover=row] tbody tr:hover.cbp-table--highlight td {
  color: var(--cbp-color-text-darkest);
  background-color: var(--cbp-table-row-color-bg-highlight);
}
cbp-table[hover=cell] .cbp-table-wrapper table tbody tr th:hover,
cbp-table[hover=cell] .cbp-table-wrapper table tbody tr td:hover {
  background-color: var(--cbp-table-row-color-bg-hover);
}
cbp-table[hover=cell] .cbp-table-wrapper table tbody tr th:hover.cbp-table--highlight,
cbp-table[hover=cell] .cbp-table-wrapper table tbody tr td:hover.cbp-table--highlight {
  color: var(--cbp-color-text-darkest);
  background-color: var(--cbp-table-row-color-bg-highlight);
}
cbp-table[column-hover] table thead tr:last-child th:hover:not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(1):hover) tbody tr > *:nth-child(1):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(2):hover) tbody tr > *:nth-child(2):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(3):hover) tbody tr > *:nth-child(3):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(4):hover) tbody tr > *:nth-child(4):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(5):hover) tbody tr > *:nth-child(5):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(6):hover) tbody tr > *:nth-child(6):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(7):hover) tbody tr > *:nth-child(7):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(8):hover) tbody tr > *:nth-child(8):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(9):hover) tbody tr > *:nth-child(9):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr:last-child > *:nth-child(10):hover) tbody tr > *:nth-child(10):not([aria-sort]) {
  color: var(--cbp-table-color);
  background-color: var(--cbp-table-row-color-bg-hover);
}
cbp-table table {
  margin: 0;
  padding: 0;
  max-width: 100%;
  text-align: left;
  border-collapse: collapse;
}
cbp-table table caption {
  text-align: start;
  font-size: var(--cbp-font-size-heading-xl);
  line-height: var(--cbp-line-height-xl);
}
cbp-table table th, cbp-table table td {
  color: var(--cbp-table-color);
  vertical-align: top;
  padding: var(--cbp-table-cell-padding);
}
cbp-table table th:has(input[type=checkbox]), cbp-table table td:has(input[type=checkbox]) {
  vertical-align: middle;
  padding-block: var(--cbp-space-2x);
}
cbp-table table th cbp-checkbox, cbp-table table td cbp-checkbox {
  --cbp-checkbox-min-height: 0;
  --cbp-checkbox-margin: 0;
}
cbp-table table thead th {
  font-size: var(--cbp-font-size-heading-xs);
  vertical-align: bottom;
  transition: width 2s;
  --cbp-button-color: var(--cbp-table-header-color);
  --cbp-button-color-dark: var(--cbp-table-header-color-dark);
  color: var(--cbp-table-header-color);
  background-color: var(--cbp-table-header-color-bg);
  font-weight: var(--cbp-font-weight-medium);
  text-wrap: balance;
  outline-width: 0;
  outline-style: solid;
  outline-color: var(--cbp-table-header-color-outline);
  outline-offset: calc(var(--cbp-space-1x) * -1);
}
cbp-table table thead th[aria-sort=none] button {
  padding-inline-end: var(--cbp-space-9x);
}
cbp-table table thead th:has(button) {
  padding: 0;
}
cbp-table table thead th:has(button:hover) {
  --cbp-table-header-color: var(--cbp-table-header-color-hover);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-hover);
  --cbp-table-header-color-dark: var(--cbp-table-header-color-hover-dark);
  --cbp-table-header-color-bg-dark: var(--cbp-table-header-color-bg-hover-dark);
}
cbp-table table thead th:has(button:hover) cbp-button[fill][color] {
  --cbp-button-color-hover: var(--cbp-table-header-color-hover);
  --cbp-button-color-hover-dark: var(--cbp-table-header-color-hover-dark);
}
cbp-table table thead th:has(cbp-button[fill][color] button:focus) {
  --cbp-table-header-color: var(--cbp-table-header-color-focus);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-focus);
  --cbp-table-header-color-dark: var(--cbp-table-header-color-focus-dark);
  --cbp-table-header-color-bg-dark: var(--cbp-table-header-color-bg-focus-dark);
  outline-width: var(--cbp-border-size-md);
}
cbp-table table thead th:has(cbp-button[fill][color] button:active) {
  --cbp-table-header-color: var(--cbp-table-header-color-active);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-active);
  --cbp-table-header-color-dark: var(--cbp-table-header-color-active-dark);
  --cbp-table-header-color-bg-dark: var(--cbp-table-header-color-bg-active-dark);
}
cbp-table table thead th cbp-button {
  --cbp-button-border-radius: 0;
  --cbp-button-border-width: 0;
  --cbp-button-focus-outline-width: 0;
  --cbp-button-color-bg: transparent !important;
  --cbp-button-color-bg-hover: transparent !important;
  --cbp-button-color-bg-focus: transparent !important;
  --cbp-button-color-bg-active: transparent !important;
  --cbp-button-color-bg-dark: transparent !important;
  --cbp-button-color-bg-hover-dark: transparent !important;
  --cbp-button-color-bg-focus-dark: transparent !important;
  --cbp-button-color-bg-active-dark: transparent !important;
  --cbp-button-padding: var(--cbp-table-cell-padding);
}
cbp-table table thead th cbp-button button {
  justify-content: flex-start;
  text-align: left;
  text-transform: unset;
  letter-spacing: unset;
  white-space: normal;
  text-wrap: balance;
  margin: 0;
  transition: width 2s;
}
cbp-table table thead th:has(button:hover) {
  --cbp-button-color-bg-hover: transparent !important;
  --cbp-button-color-bg-hover-dark: transparent !important;
}
cbp-table table thead th:has(button:focus) {
  --cbp-button-color-bg-focus: var(--cbp-color-interactive-focus-dark) !important;
  --cbp-button-color-bg-focus-dark: var(--cbp-color-interactive-focus-light) !important;
}
cbp-table table tbody tr td, cbp-table table tbody tr th {
  background-color: var(--cbp-table-row-color-bg);
}
cbp-table table tbody tr:has(input[type=checkbox]:checked) td,
cbp-table table tbody tr:has(input[type=checkbox]:checked) th {
  color: var(--cbp-table-color);
  background-color: var(--cbp-table-row-color-bg-selected);
}
cbp-table table tbody td:has(cbp-button) {
  padding-block: 0;
  vertical-align: middle;
}
cbp-table table tr {
  border-bottom: solid var(--cbp-table-row-border-size) var(--cbp-table-row-color-border);
}
cbp-table table th {
  font-weight: var(--cbp-font-weight-medium);
}
cbp-table table th[colspan] {
  text-align: center;
}
cbp-table table th[colspan]:not(:last-child) {
  border-right: solid var(--cbp-table-row-border-size) var(--cbp-table-row-color-border);
}
cbp-table table td {
  text-wrap: pretty;
}
cbp-table:not(.cbp-table-linearize) table th[scope=row] {
  border-right: solid var(--cbp-table-row-border-size) var(--cbp-table-row-color-border);
}

@property --left-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --right-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%, 100% {
    --left-fade: 1rem;
  }
  0%, 90% {
    --right-fade: 1rem;
  }
  100% {
    --right-fade: 0;
  }
}