@cbpds/web-components/dist/collection/components/cbp-menu-item/cbp-menu-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-menu-item-color: var(--cbp-color-text-lightest);
* @prop --cbp-menu-item-color-dark: var(--cbp-color-text-darkest);
* @prop --cbp-menu-item-color-bg: transparent;
* @prop --cbp-menu-item-color-bg-dark: transparent;

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

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

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

* @prop --cbp-menu-item-color-outline: var(--cbp-color-black);
* @prop --cbp-menu-item-color-outline-dark: var(--cbp-color-white);

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

[data-cbp-theme=light] cbp-menu[context*=dark] cbp-menu-item,
[data-cbp-theme=dark] cbp-menu:not([context=dark-inverts]):not([context=light-always]) cbp-menu-item {
  --cbp-menu-item-color: var(--cbp-menu-item-color-dark);
  --cbp-menu-item-color-bg: var(--cbp-menu-item-color-bg-dark);
  --cbp-menu-item-color-hover: var(--cbp-menu-item-color-hover-dark);
  --cbp-menu-item-color-bg-hover: var(--cbp-menu-item-color-bg-hover-dark);
  --cbp-menu-item-color-focus: var(--cbp-menu-item-color-focus-dark);
  --cbp-menu-item-color-bg-focus: var(--cbp-menu-item-color-bg-focus-dark);
  --cbp-menu-item-color-active: var(--cbp-menu-item-color-active-dark);
  --cbp-menu-item-color-bg-active: var(--cbp-menu-item-color-bg-active-dark);
  --cbp-menu-item-color-outline: var(--cbp-menu-item-color-outline-dark);
}

cbp-menu-item {
  --cbp-button-width: 100%;
  --cbp-button-border-radius: 0;
  display: flex;
  align-items: stretch;
  margin-bottom: 0;
  width: 100%;
  height: var(--cbp-space-9x);
  background: var(-cbp-menu-item-color-bg);
  /* Menu Close Button */
}
cbp-menu-item:first-child, cbp-menu-item:first-child a, cbp-menu-item:first-child button {
  border-radius: var(--cbp-border-radius-softer) var(--cbp-border-radius-softer) 0 0;
}
cbp-menu-item:last-child, cbp-menu-item:last-child a, cbp-menu-item:last-child button {
  border-radius: 0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer);
}
cbp-menu-item cbp-button,
cbp-menu-item cbp-link {
  display: block;
  width: 100%;
  height: 100%;
}
cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId), cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId) {
  --cbp-button-gap: var(--cbp-space-1x);
  --cbp-link-gap: var(--cbp-space-1x);
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 100%;
  padding-block: 0;
  padding-inline-start: calc(var(--cbp-space-3x) + var(--cpb-menu-item-indent));
  padding-inline-end: var(--cbp-space-3x);
  font-weight: var(--cbp-font-weight-regular);
  line-height: var(--cbp-space-5x);
  color: var(--cbp-menu-item-color);
  background: var(--cbp-menu-item-color-bg);
  border: 0;
  outline-width: 0;
  outline-style: solid;
  outline-color: var(--cbp-menu-item-color-outline);
  outline-offset: calc(var(--cbp-space-1x) * -1);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}
cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):focus, cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):focus {
  --cbp-menu-item-color: var(--cbp-menu-item-color-focus);
  --cbp-menu-item-color-bg: var(--cbp-menu-item-color-bg-focus);
  --cbp-menu-item-color-dark: var(--cbp-menu-item-color-focus-dark);
  --cbp-menu-item-color-bg-dark: var(--cbp-menu-item-color-bg-focus-dark);
  outline-width: var(--cbp-border-size-md);
}
cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):hover, cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):hover {
  --cbp-menu-item-color: var(--cbp-menu-item-color-hover);
  --cbp-menu-item-color-bg: var(--cbp-menu-item-color-bg-hover);
  --cbp-menu-item-color-dark: var(--cbp-menu-item-color-hover-dark);
  --cbp-menu-item-color-bg-dark: var(--cbp-menu-item-color-bg-hover-dark);
  outline: 0;
}
cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):active, cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):active {
  --cbp-menu-item-color: var(--cbp-menu-item-color-active);
  --cbp-menu-item-color-bg: var(--cbp-menu-item-color-bg-active);
  --cbp-menu-item-color-dark: var(--cbp-menu-item-color-active-dark);
  --cbp-menu-item-color-bg-dark: var(--cbp-menu-item-color-bg-active-dark);
}
cbp-menu-item[color=danger] {
  --cbp-menu-item-color: var(--cbp-color-danger-light);
  --cbp-menu-item-color-dark: var(--cbp-color-danger-base);
  --cbp-menu-item-color-bg-hover: var(--cbp-color-danger-light);
  --cbp-menu-item-color-bg-hover-dark: var(--cbp-color-danger-dark);
}
cbp-menu-item.cbp-menu__close-btn {
  width: 100%;
  justify-content: center;
  font-weight: var(--cbp-font-weight-bold);
  background-color: var(--cbp-color-interactive-primary-base);
  border: 0;
  cursor: pointer;
}
cbp-menu-item.cbp-menu__close-btn:hover {
  background-color: var(--cbp-color-interactive-primary-dark);
}
cbp-menu-item.cbp-menu__close-btn:focus {
  background-color: var(--cbp-color-interactive-focus-dark);
}