/* 
 * 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-listbox-menu-color: var(--cbp-form-field-color);
 *  @prop --cbp-listbox-menu-color-bg: var(--cbp-form-field-color-bg);
 *  @prop --cbp-listbox-menu-color-border: var(--cbp-form-field-color-border);
 *  @prop --cbp-listbox-menu-color-dark: var(--cbp-form-field-color-dark);
 *  @prop --cbp-listbox-menu-color-bg-dark: var(--cbp-form-field-color-bg-dark);
 *  @prop --cbp-listbox-menu-color-border-dark: var(--cbp-form-field-color-border-dark);

 *  @prop --cbp-listbox-menu-color-counter: var(--cbp-form-field-color-dark);
 *  @prop --cbp-listbox-menu-color-bg-counter: var(--cbp-form-field-color-border);
 *  @prop --cbp-listbox-menu-color-counter-dark: var(--cbp-form-field-color);
 *  @prop --cbp-listbox-menu-color-bg-counter-dark: var(--cbp-color-interactive-secondary-light);

*  @prop --cbp-listbox-menu-color-counter-dark: var(--cbp-form-field-color);
*  @prop --cbp-listbox-menu-color-bg-counter-dark: var(--cbp-color-interactive-secondary-light);

*  @prop --cbp-listbox-menu-color-counter-outline-focus: var(--cbp-color-white);
*  @prop --cbp-listbox-menu-color-counter-outline-focus-dark: var(--cbp-form-field-color-border);

*  @prop --cbp-listbox-item-color: var(--cbp-listbox-menu-color);
*  @prop --cbp-listbox-item-color-bg: transparent;
*  @prop --cbp-listbox-item-color-border: var(--cbp-color-gray-cool-50);

*  @prop --cbp-listbox-item-color-dark: var(--cbp-listbox-menu-color-dark);
*  @prop --cbp-listbox-item-color-bg-dark: transparent;
*  @prop --cbp-listbox-item-color-border-dark: var(--cbp-color-gray-cool-50);

*  @prop --cbp-listbox-item-color-hover: var(--cbp-color-text-lightest);
*  @prop --cbp-listbox-item-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
*  @prop --cbp-listbox-item-color-hover-dark: var(--cbp-color-text-darkest);
*  @prop --cbp-listbox-item-color-bg-hover-dark: var(--cbp-color-interactive-secondary-light);

*  @prop --cbp-listbox-item-color-focus: var(--cbp-color-text-lightest);
*  @prop --cbp-listbox-item-color-bg-focus: var(--cbp-color-interactive-focus-dark);
*  @prop --cbp-listbox-item-color-focus-dark: var(--cbp-color-text-darkest);
*  @prop --cbp-listbox-item-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);

*  @prop --cbp-listbox-item-border-size: var(--cbp-border-size-sm);
*  @prop --cbp-listbox-item-padding-block: var(--cbp-space-2x);
*  @prop --cbp-listbox-item-padding-inline-start: var(--cbp-space-1x);
*  @prop --cbp-listbox-item-font-style: normal;
*  @prop --cbp-listbox-item-font-style-selected: italic;
*/
:root {
  --cbp-listbox-menu-color: var(--cbp-form-field-color);
  --cbp-listbox-menu-color-placeholder: var(--cbp-form-field-color-placeholder);
  --cbp-listbox-menu-color-bg: var(--cbp-form-field-color-bg);
  --cbp-listbox-menu-color-border: var(--cbp-form-field-color-border);
  --cbp-listbox-menu-color-dark: var(--cbp-form-field-color-dark);
  --cbp-listbox-menu-color-placeholder-dark: var(--cbp-form-field-color-placeholder-dark);
  --cbp-listbox-menu-color-bg-dark: var(--cbp-form-field-color-bg-dark);
  --cbp-listbox-menu-color-border-dark: var(--cbp-form-field-color-border-dark);
  --cbp-listbox-menu-color-counter-dark: var(--cbp-form-field-color);
  --cbp-listbox-menu-color-bg-counter-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-listbox-menu-color-counter-outline-focus: var(--cbp-color-white);
  --cbp-listbox-menu-color-counter-outline-focus-dark: var(--cbp-form-field-color-border);
  --cbp-listbox-item-color: var(--cbp-listbox-menu-color);
  --cbp-listbox-item-color-bg: transparent;
  --cbp-listbox-item-color-border: var(--cbp-color-gray-cool-50);
  --cbp-listbox-item-color-dark: var(--cbp-listbox-menu-color-dark);
  --cbp-listbox-item-color-bg-dark: transparent;
  --cbp-listbox-item-color-border-dark: var(--cbp-color-gray-cool-50);
  --cbp-listbox-item-color-hover: var(--cbp-color-text-lightest);
  --cbp-listbox-item-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-listbox-item-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-listbox-item-color-bg-hover-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-listbox-item-color-focus: var(--cbp-color-text-lightest);
  --cbp-listbox-item-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-listbox-item-color-focus-dark: var(--cbp-color-text-darkest);
  --cbp-listbox-item-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-listbox-item-border-size: var(--cbp-border-size-sm);
  --cbp-listbox-item-padding-block: var(--cbp-space-2x);
  --cbp-listbox-item-padding-inline-start: var(--cbp-space-1x);
  --cbp-listbox-item-font-style: normal;
  --cbp-listbox-item-font-style-selected: italic;
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-listbox[context*=dark],
[data-cbp-theme=dark] cbp-listbox:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-listbox-menu-color: var(--cbp-listbox-menu-color-dark) !important;
  --cbp-listbox-menu-color-placeholder: var(--cbp-listbox-menu-color-placeholder-dark) !important;
  --cbp-listbox-menu-color-bg: var(--cbp-listbox-menu-color-bg-dark) !important;
  --cbp-listbox-menu-color-border: var(--cbp-listbox-menu-color-border-dark) !important;
  --cbp-listbox-menu-color-counter: var(--cbp-listbox-menu-color-counter-dark) !important;
  --cbp-listbox-menu-color-bg-counter: var(--cbp-listbox-menu-color-bg-counter-dark) !important;
  --cbp-listbox-menu-color-counter-outline-focus: var(--cbp-listbox-menu-color-counter-outline-focus-dark) !important;
  --cbp-listbox-item-color: var(--cbp-listbox-item-color-dark) !important;
  --cbp-listbox-item-color-bg: var(--cbp-listbox-item-color-bg-dark) !important;
  --cbp-listbox-item-color-border: var(--cbp-listbox-item-color-border-dark) !important;
  --cbp-listbox-item-color-hover: var(--cbp-listbox-item-color-hover-dark) !important;
  --cbp-listbox-item-color-bg-hover: var(--cbp-listbox-item-color-bg-hover-dark) !important;
  --cbp-listbox-item-color-focus: var(--cbp-listbox-item-color-focus-dark) !important;
  --cbp-listbox-item-color-bg-focus: var(--cbp-listbox-item-color-bg-focus-dark) !important;
}

cbp-listbox {
  display: block;
}
cbp-listbox:has(:focus) ul[role=listbox] {
  outline: var(--cbp-border-size-md) solid var(--cbp-form-field-color-border-focus);
  border-color: var(--cbp-form-field-color-border-focus);
  scrollbar-color: var(--cbp-form-field-color-border-focus) var(--cbp-form-field-color-bg);
}
cbp-listbox ul[role=listbox] {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: var(--cbp-z-index-level-4);
  color: var(--cbp-listbox-menu-color);
  background-color: var(--cbp-listbox-menu-color-bg);
  border: var(--cbp-border-size-md) solid var(--cbp-listbox-menu-color-border);
  border-radius: 0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft);
  height: fit-content;
  max-height: 13.5rem;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cbp-listbox-menu-color-border) var(--cbp-form-field-color-bg);
}
cbp-listbox ul[role=listbox]:hover {
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-hover);
}
cbp-listbox ul[role=listbox]:focus-within {
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-focus);
}
cbp-listbox ul[role=listbox] li {
  display: block;
  list-style-type: none;
  color: var(--cbp-listbox-item-color);
  background: var(--cbp-listbox-item-color-bg);
  font-style: var(--cbp-listbox-item-font-style);
  line-height: var(--cbp-line-height-xs);
  outline: 0;
  cursor: default;
}
cbp-listbox ul[role=listbox] li .cbp-listbox-item-content {
  margin-inline-start: var(--cbp-space-3x);
  padding-inline-start: var(--cbp-listbox-item-padding-inline-start);
  padding-block: var(--cbp-listbox-item-padding-block);
  border-block-end: var(--cbp-listbox-item-border-size) solid var(--cbp-listbox-item-color-border);
}
cbp-listbox ul[role=listbox] li:not([hidden]):last-of-type() {
  border-block-end-width: 0;
}
cbp-listbox ul[role=listbox] li:hover {
  --cbp-listbox-item-color: var(--cbp-listbox-item-color-hover);
  --cbp-listbox-item-color-bg: var(--cbp-listbox-item-color-bg-hover);
  --cbp-listbox-item-color-border: transparent;
}
cbp-listbox ul[role=listbox] li.cbp-listbox-current {
  --cbp-listbox-item-color: var(--cbp-listbox-item-color-focus);
  --cbp-listbox-item-color-bg: var(--cbp-listbox-item-color-bg-focus);
  --cbp-listbox-item-color-border: transparent;
}
cbp-listbox[open] {
  --cbp-form-field-border-radius: var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0;
}
cbp-listbox[open] ul[role=listbox] {
  display: block;
}
cbp-listbox:has(input[aria-invalid=true]) {
  --cbp-listbox-menu-color-bg: var(--cbp-form-field-color-bg);
  --cbp-listbox-menu-color-border: var(--cbp-form-field-color-border);
  --cbp-listbox-menu-color-bg-dark: var(--cbp-form-field-color-bg-dark);
  --cbp-listbox-menu-color-border-dark: var(--cbp-form-field-color-border-dark);
}