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

* @prop --cbp-nav-item-color-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-nav-item-color-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-nav-item-color-bg-hover: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-nav-item-color-bg-hover-dark: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-nav-item-color-border-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-nav-item-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);

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

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

* @prop --cbp-nav-item-color-current: var(--cbp-color-interactive-active-dark);
* @prop --cbp-nav-item-color-current-dark: var(--cbp-color-interactive-active-light);
* @prop --cbp-nav-item-color-bg-current: transparent;
* @prop --cbp-nav-item-color-border-current: var(--cbp-color-interactive-active-dark);
* @prop --cbp-nav-item-color-border-current-dark: var(--cbp-color-interactive-active-light);
*/
:root {
  --cbp-nav-item-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-nav-item-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-nav-item-color-bg: transparent;
  --cbp-nav-item-color-border: transparent;
  --cbp-nav-item-color-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-nav-item-color-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-nav-item-color-bg-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-nav-item-color-bg-hover-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-nav-item-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-nav-item-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-nav-item-color-focus: var(--cbp-color-text-lightest);
  --cbp-nav-item-color-focus-dark: var(--cbp-color-text-darkest);
  --cbp-nav-item-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-nav-item-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-nav-item-color-outline-focus: var(--cbp-color-white);
  --cbp-nav-item-color-outline-focus-dark: var(--cbp-color-black);
  --cbp-nav-item-color-active: var(--cbp-color-text-lightest);
  --cbp-nav-item-color-active-dark: var(--cbp-color-text-darkest);
  --cbp-nav-item-color-bg-active: var(--cbp-color-interactive-active-dark);
  --cbp-nav-item-color-bg-active-dark: var(--cbp-color-interactive-active-light);
  --cbp-nav-item-color-current: var(--cbp-color-interactive-active-dark);
  --cbp-nav-item-color-current-dark: var(--cbp-color-interactive-active-light);
  --cbp-nav-item-color-bg-current: transparent;
  --cbp-nav-item-color-border-current: var(--cbp-color-interactive-active-dark);
  --cbp-nav-item-color-border-current-dark: var(--cbp-color-interactive-active-light);
}

/* 
 * Dark Mode - display dark design based on mode (no context).
 * This toggle should have the highest specificity, so that what ever values were specified
 * for the dark version get written to the light within the scope of this component.
 */
[data-cbp-theme=dark] cbp-nav-item:not(#fakeId) {
  --cbp-nav-item-color: var(--cbp-nav-item-color-dark);
  --cbp-nav-item-color-hover: var(--cbp-nav-item-color-hover-dark);
  --cbp-nav-item-color-bg-hover: var(--cbp-nav-item-color-bg-hover-dark);
  --cbp-nav-item-color-border-hover: var(--cbp-nav-item-color-border-hover-dark);
  --cbp-nav-item-color-focus: var(--cbp-nav-item-color-focus-dark);
  --cbp-nav-item-color-bg-focus: var(--cbp-nav-item-color-bg-focus-dark);
  --cbp-nav-item-color-outline-focus: var(--cbp-nav-item-color-outline-focus-dark);
  --cbp-nav-item-color-active: var(--cbp-nav-item-color-active-dark);
  --cbp-nav-item-color-bg-active: var(--cbp-nav-item-color-bg-active-dark);
  --cbp-nav-item-color-current: var(--cbp-nav-item-color-current-dark);
  --cbp-nav-item-color-border-current: var(---cbp-nav-item-color-border-current-dark);
}

/* 
 * Nav-items should allow any link to be slotted - including component-based routers, 
 * which render their own link - overriding any link or button component styles.
 * cbp-button components are only required for drawer controls (holding subnav).
*/
cbp-nav-item:not(#fakeId) {
  display: inline-block;
}
cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) {
  --cbp-nav-item-color: var(--cbp-nav-item-color-current);
  --cbp-nav-item-color-bg: var(--cbp-nav-item-color-bg-current);
  --cbp-nav-item-color-border: var(--cbp-nav-item-color-border-current);
}
cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) button, cbp-nav-item:not(#fakeId)[current]:not([slot=cbp-home]) a {
  font-style: italic;
}
cbp-nav-item:not(#fakeId) button, cbp-nav-item:not(#fakeId) a {
  display: inline-flex;
  gap: var(--cbp-space-2x);
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  text-transform: unset;
  letter-spacing: normal;
  text-decoration: none;
  color: var(--cbp-nav-item-color);
  background-color: var(--cbp-nav-item-color-bg);
  font-size: var(--cbp-font-size-heading-xs);
  font-weight: var(--cbp-font-weight-medium);
  padding-block: calc(var(--cbp-space-5x) / 2) calc(var(--cbp-space-3x) / 2);
  padding-inline: var(--cbp-space-3x);
  border-width: 0 0 var(--cbp-border-size-xl) 0;
  border-style: solid;
  border-color: var(--cbp-nav-item-color-border);
  border-radius: 0;
  outline-color: var(--cbp-nav-item-color-outline-focus);
  outline-style: solid;
  outline-width: 0;
  outline-offset: calc(-1 * var(--cbp-space-1x));
}
cbp-nav-item:not(#fakeId) button:hover, cbp-nav-item:not(#fakeId) a:hover {
  --cbp-nav-item-color: var(--cbp-nav-item-color-hover);
  --cbp-nav-item-color-bg: var(--cbp-nav-item-color-bg-hover);
  --cbp-nav-item-color-border: var(--cbp-nac-item-color-border-hover);
}
cbp-nav-item:not(#fakeId) button:focus, cbp-nav-item:not(#fakeId) a:focus {
  --cbp-nav-item-color: var(--cbp-nav-item-color-focus);
  --cbp-nav-item-color-bg: var(--cbp-nav-item-color-bg-focus);
  --cbp-nav-item-color-border: transparent;
  outline-width: var(--cbp-border-size-md);
}
cbp-nav-item:not(#fakeId) button:active, cbp-nav-item:not(#fakeId) a:active {
  --cbp-nav-item-color: var(--cbp-nav-item-color-active);
  --cbp-nav-item-color-bg: var(--cbp-nav-item-color-bg-active);
}
cbp-nav-item:not(#fakeId)[slot=cbp-home] a {
  color: var(--cbp-nav-item-color);
  font-size: var(--cbp-font-size-heading-md);
  font-weight: var(--cbp-font-weight-bold);
  padding-inline: var(--cbp-space-5x);
  margin-inline-start: calc(-1 * var(--cbp-space-5x));
  font-style: normal;
}
@media (max-width: 37.5em) {
  cbp-nav-item:not(#fakeId) [slot=cbp-home] a {
    font-size: var(--cbp-font-size-heading-sm);
  }
}