:root {
  // menu and its items
  --#{$CSS_VAR_PFX}menu-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);
  --#{$CSS_VAR_PFX}menu-txt-color: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}menu-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);

  --#{$CSS_VAR_PFX}menu-active-item-bg-color: var(--#{$CSS_VAR_PFX}bg-color-darker);
  --#{$CSS_VAR_PFX}menu-active-item-txt-color: var(--#{$CSS_VAR_PFX}txt-color);

  --#{$CSS_VAR_PFX}menu-item-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);
  --#{$CSS_VAR_PFX}menu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}bg-color-dark);
  --#{$CSS_VAR_PFX}menu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}bg-color-dark);

  --#{$CSS_VAR_PFX}menu-item-txt-color: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}menu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}menu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}txt-color);

  // submenu and its items
  --#{$CSS_VAR_PFX}submenu-bg-color: var(--#{$CSS_VAR_PFX}bg-color);
  --#{$CSS_VAR_PFX}submenu-txt-color: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}submenu-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);

  --#{$CSS_VAR_PFX}submenu-item-bg-color: var(--#{$CSS_VAR_PFX}bg-color);
  --#{$CSS_VAR_PFX}submenu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}bg-color-dark);
  --#{$CSS_VAR_PFX}submenu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}bg-color-dark);

  --#{$CSS_VAR_PFX}submenu-item-txt-color: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}submenu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}submenu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}txt-color);

  --#{$CSS_VAR_PFX}submenu-animation-show-duration: #{$SUBMENU_SHOW_ANIMATION_DURATION};
  --#{$CSS_VAR_PFX}submenu-animation-show-delay: #{$SUBMENU_SHOW_ANIMATION_DELAY};

  --#{$CSS_VAR_PFX}submenu-animation-show: flatify-dropdown-show var(--#{$CSS_VAR_PFX}submenu-animation-show-duration)
    var(--#{$CSS_VAR_PFX}submenu-animation-show-delay) cubic-bezier(0.52, 0.42, 0.44, 1.44) both;
}

.menu-items-wrapper {
  list-style: none;
  padding: 0.5em;
  margin: 0;
  color: var(--#{$CSS_VAR_PFX}menu-txt-color);
  background: var(--#{$CSS_VAR_PFX}menu-bg-color);

  &.navbar {
    scrollbar-width: thin;
    display: flex;
    align-items: center;
    width: 100%;
    height: 4.25em;
    padding-left: 1.24em;
    padding-right: 1.24em;
    border-bottom: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}menu-border-color);

    // scrollable navbar does not support dropdown or submenu, but it a good choice especially for small screens
    &.scrollable-x,
    &.scrollable {
      // for small screen it should have a minimum width to prevent being compressed
      .search-bar {
        min-width: 12em;
      }
    }

    .links {
      white-space: nowrap;
      list-style: none;
      display: flex;
      padding: 0;
      margin-bottom: 0;

      .menu-item {
        position: relative;
        font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);
        border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.9);

        button,
        a {
          color: inherit;
          font-size: 1em;
          font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);
          background: transparent;
        }

        &.active {
          font-weight: var(--#{$CSS_VAR_PFX}bold-font-weight);
        }

        // show submenu on parent hover or when child is focused
        &:focus-within > .submenu,
        &:hover > .submenu {
          display: block;
          animation: var(--#{$CSS_VAR_PFX}submenu-animation-show);
        }

        .submenu {
          position: absolute;
          top: 100%;
          inset-inline-start: 0.5em;
          z-index: 10;
          display: none;

          // second level or more
          .submenu {
            top: -50%;
            inset-inline-start: 115%;

            // this a middleman to preserve connection between parent menu item
            // and its children list on hover
            &:after {
              content: " ";
              position: absolute;
              top: 0.64em;
              inset-inline-start: -3.6em;
              width: 4em;
              min-height: 4em;
              // it will block other submenus
              // height: 50%;
              background: transparent !important;
              border-radius: 1em;
            }
          }
        }
      }
    }

    .navbar-logo {
      height: 3em;
      margin-inline-end: 0.64em;

      img {
        height: 100%;
      }
    }
  }

  &[class*="style-"] {
    --#{$CSS_VAR_PFX}menu-active-item-bg-color: var(--#{$CSS_VAR_PFX}local-border-color);
    --#{$CSS_VAR_PFX}menu-active-item-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);
    --#{$CSS_VAR_PFX}menu-item-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}menu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}menu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}menu-item-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);
    --#{$CSS_VAR_PFX}menu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}local-txt-color);
    --#{$CSS_VAR_PFX}menu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}local-txt-color);
  }

  .menu-item {
    display: flex;
    align-items: center;
    margin: 0 0.25em;
    color: var(--#{$CSS_VAR_PFX}menu-item-txt-color);
    background: var(--#{$CSS_VAR_PFX}menu-item-bg-color);
    border-radius: calc(var(--#{$CSS_VAR_PFX}border-radius) * 0.75);
    transition: all var(--#{$CSS_VAR_PFX}simple-transition);

    &.disabled {
      pointer-events: none;
      user-select: none;
      opacity: 0.5;
    }

    & > button,
    & > a {
      width: 100%;
      padding: 0.64em 1em;
      color: inherit;
      text-decoration: none !important;
    }

    &:hover {
      color: var(--#{$CSS_VAR_PFX}menu-item-txt-color__hover);
      background: var(--#{$CSS_VAR_PFX}menu-item-bg-color__hover);
    }

    &.active {
      color: var(--#{$CSS_VAR_PFX}menu-active-item-txt-color);
      background: var(--#{$CSS_VAR_PFX}menu-active-item-bg-color);
    }

    // menu items are not focusable because they are usually <li>
    &:focus,
    &:focus-within {
      color: var(--#{$CSS_VAR_PFX}menu-item-txt-color__focus);
      background: var(--#{$CSS_VAR_PFX}menu-item-bg-color__focus);
    }
  }
}

.dropdown,
.menu-items-wrapper .submenu {
  --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}submenu-bg-color);
  --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}submenu-txt-color);
  --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}submenu-border-color);
  position: relative;
  min-width: 12em;
  padding: 0.5em;
  margin-bottom: 0;
  color: var(--#{$CSS_VAR_PFX}submenu-txt-color);
  background: var(--#{$CSS_VAR_PFX}submenu-bg-color);
  border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
  border-radius: var(--#{$CSS_VAR_PFX}border-radius);

  &[class*="style-"] {
    --#{$CSS_VAR_PFX}submenu-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}submenu-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);
    --#{$CSS_VAR_PFX}submenu-border-color: var(--#{$CSS_VAR_PFX}local-border-color);
    --#{$CSS_VAR_PFX}submenu-item-bg-color: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}submenu-item-bg-color__hover: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}submenu-item-bg-color__focus: var(--#{$CSS_VAR_PFX}local-bg-color);
    --#{$CSS_VAR_PFX}submenu-item-txt-color: var(--#{$CSS_VAR_PFX}local-txt-color);
    --#{$CSS_VAR_PFX}submenu-item-txt-color__hover: var(--#{$CSS_VAR_PFX}local-txt-color);
    --#{$CSS_VAR_PFX}submenu-item-txt-color__focus: var(--#{$CSS_VAR_PFX}local-txt-color);
  }

  .menu-item {
    font-size: 0.9em;
    margin: 0;
    color: var(--#{$CSS_VAR_PFX}submenu-item-txt-color);
    background: var(--#{$CSS_VAR_PFX}submenu-item-bg-color);

    &:not(:first-child) {
      margin-top: 0.32em;
    }

    a {
      padding: 0.64em 1.25em;
    }

    &:hover {
      color: var(--#{$CSS_VAR_PFX}submenu-item-txt-color__hover);
      background: var(--#{$CSS_VAR_PFX}submenu-item-bg-color__hover);
    }

    &.active {
      color: var(--#{$CSS_VAR_PFX}submenu-active-item-txt-color);
      background: var(--#{$CSS_VAR_PFX}submenu-active-item-bg-color);
    }

    &:focus,
    &:focus-within {
      color: var(--#{$CSS_VAR_PFX}submenu-item-txt-color__focus);
      background: var(--#{$CSS_VAR_PFX}submenu-item-bg-color__focus);
    }

    // additional space for menu item arrow
    &.arrow-button:after {
      margin-inline-end: 0.75em;
    }

    &.heading {
      font-weight: var(--#{$CSS_VAR_PFX}medium-font-weight);
      padding: 1em 0.75em 0.5em;
      color: var(--#{$CSS_VAR_PFX}submenu-txt-color) !important;
      background: var(--#{$CSS_VAR_PFX}submenu-bg-color) !important;
    }

    &.separator {
      height: var(--#{$CSS_VAR_PFX}border-width);
      margin: 0.5em 0 !important;
      background: var(--#{$CSS_VAR_PFX}local-border-color) !important;
      opacity: 0.5;
    }
  }

  .pointer-arrow,
  &[class*="arrow-"]:before {
    content: " ";
    position: absolute;
    height: 0;
    width: 0;
    border-style: solid;
    will-change: top, bottom, left, right;
  }

  &[data-popper-placement="bottom"] .pointer-arrow,
  &.arrow-top:before {
    top: -0.5em;
    bottom: -0.5em;
    border-width: 0 0.64em 0.64em 0.64em;
    border-color: var(--#{$CSS_VAR_PFX}local-bg-color) transparent;
    filter: drop-shadow(0 calc(var(--#{$CSS_VAR_PFX}border-width) * -1) 0 var(--#{$CSS_VAR_PFX}local-border-color));
  }

  &[data-popper-placement="top"] .pointer-arrow,
  &.arrow-bottom:before {
    bottom: -0.5em;
    border-width: 0.64em 0.64em 0 0.64em;
    border-color: var(--#{$CSS_VAR_PFX}local-bg-color) transparent;
    filter: drop-shadow(0 var(--#{$CSS_VAR_PFX}border-width) 0 var(--#{$CSS_VAR_PFX}local-border-color));
  }

  &[data-popper-placement="right"] .pointer-arrow,
  &.arrow-left:before {
    left: -0.5em;
    border-width: 0.64em 0.64em 0.64em 0;
    border-color: transparent var(--#{$CSS_VAR_PFX}local-bg-color);
    filter: drop-shadow(calc(var(--#{$CSS_VAR_PFX}border-width) * -1) 0 0 var(--#{$CSS_VAR_PFX}local-border-color));
  }

  &[data-popper-placement="left"] .pointer-arrow,
  &.arrow-right:before {
    right: -0.5em;
    border-width: 0.64em 0 0.64em 0.64em;
    border-color: transparent var(--#{$CSS_VAR_PFX}local-bg-color);
    filter: drop-shadow(var(--#{$CSS_VAR_PFX}border-width) 0 0 var(--#{$CSS_VAR_PFX}local-border-color));
  }

  &.arrow-top:before,
  &.arrow-bottom:before {
    inset-inline-start: 2em;
  }
  &.arrow-left:before,
  &.arrow-right:before {
    top: 2em;
  }
}