@cbpds/web-components/dist/collection/components/cbp-dropdown-item/cbp-dropdown-item.css

Web components for the CBP Design System.

/* 
 * 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-dropdown-item-color: var(--cbp-dropdown-menu-color);
* @prop --cbp-dropdown-item-color-bg: transparent;
* @prop --cbp-dropdown-item-color-border: var(--cbp-color-gray-cool-50);
* @prop --cbp-dropdown-item-color-dark: var(--cbp-dropdown-menu-color-dark);
* @prop --cbp-dropdown-item-color-bg-dark: transparent;
* @prop --cbp-dropdown-item-color-border-dark: var(--cbp-color-gray-cool-50);
* @prop --cbp-dropdown-item-border-size: var(--cbp-border-size-sm);
*/
:root {
  --cbp-dropdown-item-color: var(--cbp-dropdown-menu-color);
  --cbp-dropdown-item-color-bg: transparent;
  --cbp-dropdown-item-color-border: var(--cbp-color-gray-cool-50);
  --cbp-dropdown-item-color-dark: var(--cbp-dropdown-menu-color-dark);
  --cbp-dropdown-item-color-bg-dark: transparent;
  --cbp-dropdown-item-color-border-dark: var(--cbp-color-gray-cool-50);
  --cbp-dropdown-item-border-size: var(--cbp-border-size-sm);
  --cbp-dropdown-item-padding-block: var(--cbp-space-2x);
  --cbp-dropdown-item-padding-inline-start: var(--cbp-space-1x);
  --cbp-dropdown-item-font-style: normal;
  --cbp-dropdown-item-font-style-selected: italic;
}

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

cbp-dropdown-item {
  /* TechDebt: can we inherit from here rather than the root selector? Needs more testing.
    --cbp-dropdown-item-color: var(--cbp-dropdown-color);
    --cbp-dropdown-item-color-bg: var(--cbp-dropdown-color-bg);
    --cbp-dropdown-item-color-border: var(--cbp-color-gray-cool-50);
    --cbp-dropdown-item-color-dark: var(--cbp-dropdown-color-dark);
    --cbp-dropdown-item-color-bg-dark: var(--cbp-dropdown-color-bg-dark);
    --cbp-dropdown-item-color-border-dark: var(--cbp-color-gray-cool-50);
  */
  display: block;
  color: var(--cbp-dropdown-item-color);
  background: var(--cbp-dropdown-item-color-bg);
  font-style: var(--cbp-dropdown-item-font-style);
  line-height: var(--cbp-line-height-xs);
  outline: 0;
  cursor: default;
  /*
    Multi-select: Requires overrides for checkboxes
      Checkboxes in multi-select are inverted on interactive states
      Note: this can be accomplished via the CSS API, but is complex because we need to 
        apply styling of interactive checkbox states from the dropdown-item level and the 
        checkbox interactive styles may still be present and need to be overridden.
  */
}
cbp-dropdown-item .cbp-dropdown-item-content {
  margin-inline-start: var(--cbp-space-3x);
  padding-inline-start: var(--cbp-dropdown-item-padding-inline-start);
  padding-block: var(--cbp-dropdown-item-padding-block);
  border-block-end: var(--cbp-dropdown-item-border-size) solid var(--cbp-dropdown-item-color-border);
}
cbp-dropdown-item:not([hidden]):last-of-type() {
  border-block-end-width: 0;
}
cbp-dropdown-item[selected] {
  --cbp-dropdown-item-color: var(--cbp-color-text-dark);
  --cbp-dropdown-item-color-dark: var(--cbp-color-text-light);
  --cbp-dropdown-item-font-style: var(--cbp-dropdown-item-font-style-selected);
}
cbp-dropdown-item:hover {
  --cbp-dropdown-item-color: var(--cbp-color-text-lightest);
  --cbp-dropdown-item-color-bg: var(--cbp-color-interactive-secondary-darker);
  --cbp-dropdown-item-color-border: transparent;
  --cbp-dropdown-item-color-dark: var(--cbp-color-text-darkest);
  --cbp-dropdown-item-color-bg-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-dropdown-item-color-border-dark: transparent;
}
cbp-dropdown-item[current], cbp-dropdown-item:focus {
  --cbp-dropdown-item-color: var(--cbp-color-text-lightest);
  --cbp-dropdown-item-color-bg: var(--cbp-color-interactive-focus-dark);
  --cbp-dropdown-item-color-border: transparent;
  --cbp-dropdown-item-color-dark: var(--cbp-color-text-darkest);
  --cbp-dropdown-item-color-bg-dark: var(--cbp-color-interactive-focus-light);
  --cbp-dropdown-item-color-border-dark: transparent;
}
cbp-dropdown-item[disabled] {
  font-style: italic;
}
cbp-dropdown-item cbp-checkbox {
  --cbp-checkbox-min-height: var(--cbp-space-7x);
  --cbp-checkbox-margin: 0;
  --cbp-checkbox-color-halo-hover: transparent;
  --cbp-checkbox-color-halo-focus: transparent;
  --cbp-checkbox-color-halo-checked-hover: transparent;
  --cbp-checkbox-color-halo-checked-focus: transparent;
  --cbp-checkbox-color-halo-hover-dark: transparent;
  --cbp-checkbox-color-halo-focus-dark: transparent;
  --cbp-checkbox-color-halo-checked-hover-dark: transparent;
  --cbp-checkbox-color-halo-checked-focus-dark: transparent;
  --cbp-checkbox-font-weight-label: var(--cbp-font-weight-regular);
}
cbp-dropdown-item[current] cbp-checkbox, cbp-dropdown-item:focus cbp-checkbox, cbp-dropdown-item:hover cbp-checkbox {
  --cbp-checkbox-color-label: var(--cbp-color-text-lightest);
  --cbp-checkbox-color-label-dark: var(--cbp-color-text-darkest);
}
cbp-dropdown-item[current] cbp-checkbox, cbp-dropdown-item:focus cbp-checkbox {
  --cbp-checkbox-color: var(--cbp-color-text-lightest);
  --cbp-checkbox-color-bg: var(--cbp-color-gray-cool-70);
  --cbp-checkbox-color-border: var(--cbp-checkbox-color-border-focus-dark);
  --cbp-checkbox-color-border-hover: var(--cbp-checkbox-color-border-focus-dark);
  --cbp-checkbox-color-bg-checked: var(--cbp-checkbox-color-bg-checked-focus);
  --cbp-checkbox-color-border-checked: var(--cbp-checkbox-color-border-checked-focus);
  --cbp-checkbox-color-border-checked-hover: var(--cbp-checkbox-color-border-checked-focus);
  --cbp-checkbox-color-dark: var(--cbp-color-text-darkest);
  --cbp-checkbox-color-bg-dark: var(--cbp-color-white);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-checkbox-color-border-hover-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-checkbox-color-bg-checked-dark: var(--cbp-checkbox-color-bg-checked-focus-dark);
  --cbp-checkbox-color-border-checked-dark: var(--cbp-checkbox-color-border-checked-focus-dark);
  --cbp-checkbox-color-border-checked-hover-dark: var(--cbp-checkbox-color-border-checked-focus-dark);
}
cbp-dropdown-item:hover:not(:focus) cbp-checkbox {
  --cbp-checkbox-color: var(--cbp-color-text-darkest);
  --cbp-checkbox-color-bg: var(--cbp-color-gray-cool-70);
  --cbp-checkbox-color-border: var(--cbp-color-interactive-secondary-lighter);
  --cbp-checkbox-color-border-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-checkbox-color-bg-checked: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-border-checked: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-border-checked-hover: var(--cbp-color-interactive-selected-light);
  --cbp-checkbox-color-dark: var(--cbp-color-text-lightest);
  --cbp-checkbox-color-bg-dark: var(--cbp-color-white);
  --cbp-checkbox-color-border-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-checkbox-color-border-hover-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-checkbox-color-bg-checked-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-border-checked-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-checkbox-color-border-checked-hover-dark: var(--cbp-color-interactive-selected-dark);
}