/* CiviCRM navigation menu stylesheet */

:root {
  --crm-menubar-height: $menubarHeight;
  --crm-menubar-color: $menubarColor;
  --crm-menubar-item-color: $menuItemColor;
  --crm-menubar-text-color: $textColor;
  --crm-menubar-highlight-color: $highlightColor;
  --crm-menubar-highlight-text-color: $highlightTextColor;
}
#civicrm-menu-nav {
  line-height: 0;
  text-align: left;
  font-size: 13px;
}
#civicrm-menu {
  background-color: var(--crm-menubar-color);
  width: 100%;
  z-index: 500;
  height: auto;
  margin: 0;
}
#civicrm-menu i {
  margin-right: 3px;
}
#civicrm-menu li {
  border: none;
  padding: 0;
}
#civicrm-menu li a {
  padding: 12px 8px;
  text-decoration: none;
  box-shadow: none;
  border: none;
}
#civicrm-menu li a[href="#"] {
  cursor: default;
}
#civicrm-menu li li a {
  padding: 6px 36px 6px 10px;
}
#civicrm-menu li.crm-menu-border-bottom + li,
#civicrm-menu li + li.crm-menu-border-top {
  border-top: 1px solid #bbb;
}
#civicrm-menu li a:focus,
#civicrm-menu li a:hover,
#civicrm-menu li a.highlighted {
  text-decoration: none;
  background-color: var(--crm-menubar-highlight-color);
  color: var(--crm-menubar-highlight-text-color);
}
#civicrm-menu li li .sub-arrow:before {
  content: "\f0da";
  font-family: 'FontAwesome';
  float: right;
  margin-right: -25px;
}
/* x icon */
#crm-menubar-state:checked ~ .crm-menubar-toggle-btn .crm-menubar-toggle-btn-icon {
  height: 0;
  background: transparent;
}
#crm-menubar-state:checked ~ .crm-menubar-toggle-btn .crm-menubar-toggle-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#crm-menubar-state:checked ~ .crm-menubar-toggle-btn .crm-menubar-toggle-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#civicrm-menu-nav #crm-menubar-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
#civicrm-menu-nav .crm-menubar-toggle-btn {
  position: relative;
  display: inline-block;
  width: 57px;
  height: 28px;
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background-color: #1b1b1b;
}

/* responsive icon */

#civicrm-menu-nav .crm-menubar-toggle-btn-icon,
#civicrm-menu-nav .crm-menubar-toggle-btn-icon:before,
#civicrm-menu-nav .crm-menubar-toggle-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 27px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
#civicrm-menu-nav .crm-menubar-toggle-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
#civicrm-menu-nav .crm-menubar-toggle-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}

/* Quicksearch */
#crm-qsearch {
  padding: 1px 0 1px 2px;
  background-color: transparent !important;
}
#civicrm-menu #crm-qsearch > a {
  padding: 2px 0 0 2px;
}

input#crm-qsearch-input {
  box-sizing: border-box;
  background-color: #eaeaea;
  font-size: 13px;
  border: 1px solid #ccc;
  margin: 4px 4px 0;
  padding: 2px 8px;
  min-height: 0;
  height: calc(var(--crm-menubar-height) - 10px);
  width: 30px;
  transition: width .5s .05s, background-color .3s .05s;
  color: black;
}
a.highlighted #crm-qsearch-input,
#crm-qsearch-input:focus,
#crm-qsearch-input.has-user-input {
  background-color: white;
  width: 130px;
}
input#crm-qsearch-input:-ms-input-placeholder {
  font-family: 'FontAwesomeSafe', sans-serif;
}
input#crm-qsearch-input::-webkit-input-placeholder {
  font-family: 'FontAwesomeSafe', sans-serif;
}
input#crm-qsearch-input::-moz-placeholder {
  font-family: 'FontAwesomeSafe', sans-serif;
}
input#crm-qsearch-input::placeholder {
  font-family: 'FontAwesomeSafe', sans-serif;
}

ul.crm-quickSearch-results {
  z-index: 100001;
}
ul.crm-quickSearch-results.ui-state-disabled {
  opacity: .8;
}

#civicrm-menu-nav .crm-logo-sm {
  display: inline-block;
  background: var(--crm-svg-logo, url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 355 355" style="enable-background:new 0 0 355 355;" xml:space="preserve"><style type="text/css">.st0{fill:%23086287;}.st1{fill:%2381C459;}</style><g transform="matrix(1, 0, 0, 1, -198, -120)"><g><path class="st0" d="M342.05,470.43C342.05,470.43,342.05,470.43,342.05,470.43c-20.72-0.4-28.62-24.34-29.45-27.07l-70.69-231.67c-4.16-13.61-3.21-24.56,2.83-32.55c3.9-5.16,11.67-11.25,26.56-10.96c5.45,0.1,9.72,1.07,10.19,1.17l235.37,54.83c15.13,3.52,24.43,10.66,27.64,21.21c5.09,16.72-9.08,32.57-10.72,34.32L369.09,456.41C360.25,465.89,351.15,470.61,342.05,470.43z M270.14,192.48c-4.21-0.08-5.58,1.07-5.84,1.44c-1.19,1.68-1.45,2.43,1.05,10.62l70.69,231.66c1.58,4.95,4.2,9.55,6.48,9.72l0,0c0.03,0,2.84-0.02,8.64-6.23l164.69-176.68c3.04-3.34,5.84-8.78,5.2-10.46c-0.46-1.19-2.35-2.75-9.76-4.48l-235.37-54.84l0,0C275.92,193.23,272.97,192.54,270.14,192.48z"/></g><g><path class="st1" d="M315.61,451.6c-7.61,2.82-15.56,3.37-21.8,1.34c0,0,0,0,0,0c-19.66-6.41-20.24-31.58-20.24-34.42l0.02-225.56l23.16,5.19L296.84,419c0.06,5.18,1.4,10.13,4.56,10.68l0,0c0.02,0.01,1.64,0.52,6.35-1.63L315.61,451.6z M329.71,415.68l190.44-110.19c3.87-2.3,8.39-5.74,8.01-8.48c-0.06-0.41-0.96-2.89-5.08-5.75l15.97-18.15c9.02,6.88,13.59,14.89,13.59,23.91c0,17.44-18.16,28.45-20.23,29.65L337.06,438.9L329.71,415.68z M500.93,278.76L313.77,169.87c0,0-4.67-2.98-7.36-3.86c-4-1.3-5.96,0.02-6.33,0.27c-1.12,0.75-1.48,1.34-1.95,6.84l-24.11-4.49c1.31-10.03,5.23-17.46,11.68-22.15c5.22-3.79,14.42-7.34,28.55-2.73c5.17,1.69,8.97,3.85,9.38,4.09l194.69,112.31L500.93,278.76z"/></g></g></svg>')) no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

#civicrm-menu #crm-menubar-toggle-position {
  float: right;
}
#civicrm-menu #crm-menubar-toggle-position a i {
  margin: 0;
  border-top: 2px solid var(--crm-menubar-text-color);
  font-size: 11px;
  opacity: .8;
}
body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
  transform: rotate(180deg);
}

/* Drilldown menu item finder */
#civicrm-menu [data-name=MenubarDrillDown] > a {
  padding-top: 2px;
  padding-bottom: 2px;
}
#crm-menubar-drilldown {
  padding: 4px;
  background-color: #eee;
}
#crm-menubar-drilldown:focus {
  background-color: white;
}
#crm-menubar-drilldown + .sub-arrow:before {
  margin-top: 5px;
}

@media (min-width: $breakMin) {

  /* Switch to desktop layout
  -----------------------------------------------
     These transform the menu tree from
     collapsible to desktop (navbar + dropdowns)
  -----------------------------------------------*/
  /* start... (it's not recommended editing these rules) */
  #civicrm-menu ul {
    position: absolute;
    width: 12em;
  }
  #civicrm-menu li {
    float: left;
  }
  #civicrm-menu.sm-rtl li {
    float: right;
  }
  #civicrm-menu ul li,
  #civicrm-menu.sm-rtl ul li,
  #civicrm-menu.sm-vertical li {
    float: none;
  }
  #civicrm-menu a {
    white-space: nowrap;
  }
  #civicrm-menu ul a,
  #civicrm-menu.sm-vertical a {
    white-space: normal;
  }
  #civicrm-menu .sm-nowrap > li > a,
  #civicrm-menu .sm-nowrap > li > :not(ul) a {
    white-space: nowrap;
  }
  /* ...end */

  /* hide the button in desktop view */
  #civicrm-menu-nav .crm-menubar-toggle-btn {
    position: absolute;
    top: -99999px; /* do not edit this without updating the isMobile() function in crm.menubar.js */
  }

  #civicrm-menu {
    border-bottom: 1px solid #ccc;
  }

  body.crm-menubar-below-cms-menu > #civicrm-menu-nav #civicrm-menu {
    top: 30px;
  }

  #civicrm-menu ul {
    box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.3);
  }

  #civicrm-menu li a {
    background-color: var(--crm-menubar-item-color);
    color: var(--crm-menubar-text-color);
  }

  #civicrm-menu > li > a {
    height: var(--crm-menubar-height);
    padding: 0 8px;
  }

  #civicrm-menu > li > a > * {
    vertical-align: middle;
  }

  /* Pseudo-element to ensure vertical alignment */
  #civicrm-menu > li:not(#crm-qsearch) > a:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  #civicrm-menu > li > a.highlighted {
    z-index: 200000;
  }

  body.crm-menubar-over-cms-menu #civicrm-menu,
  body.crm-menubar-below-cms-menu #civicrm-menu {
    position: fixed;
    top: 0;
  }

  body.crm-menubar-over-cms-menu #civicrm-menu {
    z-index: 99999;
  }

  body.crm-menubar-above-crm-container #civicrm-menu {
    z-index: 100;
  }

  body.crm-menubar-hidden #civicrm-menu {
    display: none;
  }
}

@media (max-width: $breakMax) {
  /* hide the menu in mobile view */
  #crm-menubar-state:not(:checked) ~ #civicrm-menu {
    display: none;
  }
  #civicrm-menu {
    z-index: 100000;
    background-color: #1b1b1b;
  }
  #civicrm-menu ul {
    background-color: #444;
  }
  #civicrm-menu ul ul {
    background-color: #555;
  }
  #civicrm-menu ul ul ul {
    background-color: #666;
  }
  #civicrm-menu li {
    padding: 5px;
  }
  #civicrm-menu li a {
    text-align: center;
    font-size: 14px;
    color: #ddd;
  }
  #civicrm-menu li a:focus,
  #civicrm-menu li a:hover,
  #civicrm-menu li a.highlighted {
    background-color: #676767;
    color: #fff;
  }
  #civicrm-menu li .sub-arrow:before,
  #civicrm-menu li li .sub-arrow:before {
    content: "\f0da";
    font-family: 'FontAwesome';
    color: #bbb;
    float: none;
    margin-left: 10px;
  }
  #civicrm-menu li a.highlighted .sub-arrow:before {
    content: "\f0d7";
  }
  #civicrm-menu-nav {
    position: fixed;
    background: transparent;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    z-index: 100000;
  }
  #civicrm-menu-nav > * {
    pointer-events: auto;
  }
  #civicrm-menu-nav .crm-menubar-toggle-btn {
    margin-left: 20px;
    z-index: 110000;
    margin-top: 10px;
  }
  #civicrm-menu-nav .crm-menubar-toggle-btn span.crm-menu-logo {
    display: block;
    position: absolute;
    left: 5px;
    top: 6px;
    background: var(--crm-svg-logo, url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 355 355" style="enable-background:new 0 0 355 355;" xml:space="preserve"><style type="text/css">.st0{fill:%23086287;}.st1{fill:%2381C459;}</style><g transform="matrix(1, 0, 0, 1, -198, -120)"><g><path class="st0" d="M342.05,470.43C342.05,470.43,342.05,470.43,342.05,470.43c-20.72-0.4-28.62-24.34-29.45-27.07l-70.69-231.67c-4.16-13.61-3.21-24.56,2.83-32.55c3.9-5.16,11.67-11.25,26.56-10.96c5.45,0.1,9.72,1.07,10.19,1.17l235.37,54.83c15.13,3.52,24.43,10.66,27.64,21.21c5.09,16.72-9.08,32.57-10.72,34.32L369.09,456.41C360.25,465.89,351.15,470.61,342.05,470.43z M270.14,192.48c-4.21-0.08-5.58,1.07-5.84,1.44c-1.19,1.68-1.45,2.43,1.05,10.62l70.69,231.66c1.58,4.95,4.2,9.55,6.48,9.72l0,0c0.03,0,2.84-0.02,8.64-6.23l164.69-176.68c3.04-3.34,5.84-8.78,5.2-10.46c-0.46-1.19-2.35-2.75-9.76-4.48l-235.37-54.84l0,0C275.92,193.23,272.97,192.54,270.14,192.48z"/></g><g><path class="st1" d="M315.61,451.6c-7.61,2.82-15.56,3.37-21.8,1.34c0,0,0,0,0,0c-19.66-6.41-20.24-31.58-20.24-34.42l0.02-225.56l23.16,5.19L296.84,419c0.06,5.18,1.4,10.13,4.56,10.68l0,0c0.02,0.01,1.64,0.52,6.35-1.63L315.61,451.6z M329.71,415.68l190.44-110.19c3.87-2.3,8.39-5.74,8.01-8.48c-0.06-0.41-0.96-2.89-5.08-5.75l15.97-18.15c9.02,6.88,13.59,14.89,13.59,23.91c0,17.44-18.16,28.45-20.23,29.65L337.06,438.9L329.71,415.68z M500.93,278.76L313.77,169.87c0,0-4.67-2.98-7.36-3.86c-4-1.3-5.96,0.02-6.33,0.27c-1.12,0.75-1.48,1.34-1.95,6.84l-24.11-4.49c1.31-10.03,5.23-17.46,11.68-22.15c5.22-3.79,14.42-7.34,28.55-2.73c5.17,1.69,8.97,3.85,9.38,4.09l194.69,112.31L500.93,278.76z"/></g></g></svg>')) no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
  }
  #crm-qsearch {
    text-align: center;
  }
  #crm-qsearch .sub-arrow {
    display: none;
  }

  #civicrm-menu li[data-name="Hide Menu"] {
    display: none;
  }

  #crm-qsearch-input {
    width: 14em !important;
  }

  #crm-menubar-toggle-position {
    display: none;
  }

  /* Make sure we can click overlapped submenus in responsive mode */
  #civicrm-menu li ul li {
    z-index: 110000;
    background-color: inherit;
  }
}
