@cbpds/web-components/dist/collection/components/cbp-subnav-item/cbp-subnav-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-subnav-item-color: var(--cbp-color-interactive-secondary-darker);
 * @prop  --cbp-subnav-item-color-dark: var(--cbp-color-interactive-secondary-lighter);
 * @prop  --cbp-subnav-item-color-bg: transparent;
 * @prop  --cbp-subnav-item-color-bg-dark: var(--cbp-color-gray-cool-70);

 * @prop  --cbp-subnav-item-current-color:var(--cbp-color-interactive-active-dark);
 * @prop  --cbp-subnav-item-current-color-bg: var(--cbp-color-interactive-active-light);
 * @prop  --cbp-subnav-item-current-border-color: var(--cbp-color-interactive-active-dark);
 * @prop  --cbp-subnav-item-current-border-color-dark: var(--cbp-color-interactive-active-light); 

 * @prop  --cbp-subnav-item-indent: var(--cbp-space-4x);
 * @prop  --cbp-subnav-item-font-size: var(--cbp-font-size-heading-md);
*/
:root {
  --cbp-subnav-item-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-subnav-item-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-subnav-item-color-bg: transparent;
  --cbp-subnav-item-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-subnav-item-current-color:var(--cbp-color-interactive-active-dark);
  --cbp-subnav-item-current-color-dark:var(--cbp-color-interactive-active-lighter);
  --cbp-subnav-item-current-color-bg: var(--cbp-color-interactive-active-light);
  --cbp-subnav-item-current-color-bg-dark: var(--cbp-color-interactive-active-dark);
  --cbp-subnav-item-current-border-color: var(--cbp-color-interactive-active-dark);
  --cbp-subnav-item-current-border-color-dark: var(--cbp-color-interactive-active-light);
  --cbp-subnav-item-border-color: red;
  --cbp-subnav-item-hover-border-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-subnav-item-hover-border-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-subnav-item-indent: var(--cbp-space-4x);
  --cbp-subnav-item-font-size: var(--cbp-font-size-heading-md);
}

[data-cbp-theme=light] cbp-subnav[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-subnav:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-subnav-item-color: var(--cbp-subnav-item-color-dark);
  --cbp-subnav-item-color-bg: var(--cbp-subnav-item-color-bg-dark);
  --cbp-subnav-item-current-border-color: var(--cbp-subnav-item-current-border-color-dark);
  --cbp-subnav-item-current-color-bg: var(--cbp-subnav-item-current-color-bg-dark);
  --cbp-subnav-item-hover-border-color: var(--cbp-subnav-item-hover-border-color-dark);
}

cbp-subnav-item {
  color: var(--cbp-subnav-item-color);
  background-color: var(--cbp-subnav-item-color-bg);
  --cbp-subnav-item-rotate-icon: rotate(90deg);
}
cbp-subnav-item section {
  display: none;
}
cbp-subnav-item[current] > div, cbp-subnav-item:has(cbp-subnav-item[current]) > div {
  --cbp-subnav-item-border-color: var(--cbp-subnav-item-current-border-color) ;
}
cbp-subnav-item[current] > div > cbp-button[fill=outline][color=primary]:first-of-type {
  --cbp-button-color: var(--cbp-subnav-item-current-color);
  --cbp-button-color-dark: var(--cbp-subnav-item-current-color-dark);
  --cbp-button-color-bg: var(--cbp-subnav-item-current-color-bg);
  --cbp-button-color-bg-dark: var(--cbp-subnav-item-current-color-bg-dark);
  font-style: italic;
}
cbp-subnav-item[current] > div > cbp-button[fill=outline][color=primary]:first-of-type > a {
  font-weight: var(--cbp-font-weight-bold);
}
cbp-subnav-item > div {
  --cbp-subnav-item-border-color: var(--cbp-subnav-item-color-bg);
  display: flex;
  border-left: var(--cbp-border-size-xl) solid var(--cbp-subnav-item-border-color);
}
cbp-subnav-item:hover > div {
  --cbp-subnav-item-border-color: var(--cbp-subnav-item-hover-border-color);
}
cbp-subnav-item cbp-button[fill=outline][color=primary] {
  --cbp-button-min-height: 3.5rem;
  --cbp-button-width: 100%;
  --cbp-button-border-radius: var(--cbp-border-radius-sharp);
  --cbp-button-border-width: var(--cbp-border-size-sm);
  --cbp-button-color: var(--cbp-subnav-item-color);
  --cbp-button-color-dark: var(--cbp-subnav-item-color);
  --cbp-button-color-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-focus: var(--cbp-color-text-lightest);
  --cbp-button-color-focus-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-active: var(--cbp-color-text-lightest);
  --cbp-button-color-active-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg: var(--cbp-subnav-item-color-bg);
  --cbp-button-color-bg-dark: var(--cbp-subnav-item-color-bg-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-button-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-button-color-bg-active: var(--cbp-color-interactive-active-dark);
  --cbp-button-color-bg-active-dark: var(--cbp-color-interactive-active-light);
  --cbp-button-color-border: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-dark: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-hover: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-hover-dark: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-focus: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-focus-dark: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-active: var(--cbp-color-gray-cool-40);
  --cbp-button-color-border-active-dark: var(--cbp-color-gray-cool-40);
}
cbp-subnav-item cbp-button[fill=outline][color=primary] a {
  letter-spacing: var(--cbp-letter-spacing-regular);
  text-transform: unset;
}
cbp-subnav-item cbp-button[fill=outline][color=primary] [slot=cbp-subnav-item-label] {
  display: inline-flex;
  gap: var(--cbp-space-2x);
  align-items: center;
}
cbp-subnav-item cbp-button[fill=outline][color=primary]:first-of-type button, cbp-subnav-item cbp-button[fill=outline][color=primary]:first-of-type a {
  justify-content: start;
  font-weight: var(--cbp-font-weight-medium);
  padding-left: calc(var(--cbp-subnav-item-indent));
  font-size: var(--cbp-subnav-item-font-size);
  border-left: none;
  border-right: none;
}
cbp-subnav-item cbp-button[fill=outline][color=primary] + cbp-button {
  --cbp-button-width: 3.5rem;
  --cbp-icon-size: var(--cbp-space-5x);
  transform: var(--cbp-subnav-item-rotate-icon);
}
cbp-subnav-item[open] {
  --cbp-subnav-item-rotate-icon: rotate(270deg);
}
cbp-subnav-item[open] > section {
  display: block;
}

cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item {
  --cbp-subnav-item-indent: var(--cbp-space-7x);
  --cbp-subnav-item-font-size: var(--cbp-font-size-heading-sm);
}
cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item cbp-subnav-item {
  --cbp-subnav-item-indent: var(--cbp-space-10x);
  --cbp-subnav-item-font-size: var(--cbp-font-size-heading-xs);
  --cbp-subnav-item-rotate-icon: rotate(0deg);
}
cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item cbp-subnav-item[open] {
  --cbp-subnav-item-rotate-icon: rotate(180deg);
}
cbp-subnav:not([flat]) cbp-subnav-item cbp-subnav-item cbp-subnav-item cbp-subnav-item {
  --cbp-subnav-item-indent: var(--cbp-space-14x);
  --cbp-subnav-item-font-size: var(--cbp-font-size-body);
}

cbp-subnav[flat] cbp-subnav-item cbp-subnav-item cbp-subnav-item cbp-button + cbp-button {
  --cbp-subnav-item-rotate-icon: rotate(0deg);
}

cbp-subnav[flat] cbp-subnav-item cbp-subnav-item cbp-subnav-item[open] cbp-button + cbp-button {
  --cbp-subnav-item-rotate-icon: rotate(180deg);
}