/* 
 * 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-color-bg: var(--cbp-color-gray-cool-80);
* @prop --cbp-menu-color-bg-dark: var(--cbp-color-gray-cool-5);
* @prop --cbp-menu-gap: var(--cbp-space-3x);
*/
:root {
  --cbp-menu-color-bg: var(--cbp-color-gray-cool-80);
  --cbp-menu-color-bg-dark: var(--cbp-color-gray-cool-5);
  --cbp-menu-gap: var(--cbp-space-3x);
}

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

cbp-menu {
  position: relative;
  display: inline-block;
  max-width: 100%;
  /* The actual menu, positioned for mobile-first */
  /* Menu Positioning for the larger breakpoints */
}
cbp-menu .cbp-menu__menu {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: max-content;
  padding: 0;
  background: var(--cbp-menu-color-bg);
  border-radius: var(--cbp-border-radius-softer);
  box-shadow: var(--cbp-shadow-level-1-down);
  z-index: var(--cbp-z-index-level-0);
}
@media (min-width: 37.5em) {
  cbp-menu .cbp-menu__menu {
    width: max-content;
    max-width: max-content;
    margin: 0;
  }
  cbp-menu[position=top-start] .cbp-menu__menu {
    top: 100%;
    left: 0;
    transform: translate(0, -100%);
  }
  cbp-menu[position=top-end] .cbp-menu__menu {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }
  cbp-menu[position=bottom-start] .cbp-menu__menu {
    top: 0;
    left: 0;
  }
  cbp-menu[position=bottom-end] .cbp-menu__menu {
    top: 0;
    left: 100%;
    transform: translate(-100%, 0);
  }
}