.ui-menu {
  $base: unquote(".ui-menu");

  &__group {
    &__label {
      color: $gray;
    }

    &::after {
      @extend %hr;
    }
  }

  &__item {
    &__link {
      &:hover {
        background-color: var(--menu-hover-bg, $menu-hover-bg);
        box-shadow: 0 0 1px 0 var(--menu-active-bg, $menu-active-bg) inset;
        color: var(--menu-hover-color, $menu-hover-color);
      }

      &[data-open="true"],
      &:active {
        color: var(--primary, $primary);
      }

      &[data-active="true"] {
        background-color: var(--menu-active-bg, $menu-active-bg);
        box-shadow: 4px 0 0 0 var(--menu-active-border-color, $menu-active-border-color) inset;
        color: var(--menu-active-color, $menu-active-color);
      }

      &[data-disabled="true"] {
        color: $gray;
      }

      @at-root [dir="rtl"] &[data-active="true"] {
        box-shadow: -4px 0 0 0 var(--menu-active-border-color, $menu-active-border-color) inset;
      }
    }

    &__caret {
      &--split {
        &:hover {
          background-color: var(--menu-hover-bg, $menu-hover-bg);
          color: var(--menu-hover-color, $menu-hover-color);
        }

        &[data-open="true"],
        &:active {
          background-color: var(--menu-active-bg, $menu-active-bg);
          color: var(--menu-active-color, $menu-active-color);
        }
      }
    }
  }

  .ui-divider {
    @extend %hr;
  }

  &__bar {
    background-color: var(--menubar-bg, $menubar-bg);

    &::after {
      @extend %hr;
    }

    &__wrapper {
      .ui-divider {
        @extend %vr;
      }

      #{$base}__item {
        &__link[data-active="true"] {
          box-shadow: 0 -2px 0 0 var(--menu-active-color, $menu-active-color) inset;
        }
      }

      #{$base}__group {
        border: 1px solid rgba($base-border-color, 0.5);
      }
    }
  }
}

nav {
  background-color: $base-theme;

  .ui-btn {
    .ui-badge {
      font-weight: 600;
      background-color: var(--primary, $primary);
      color: var(--primary-reverse, set-color($primary));
      box-shadow: initial;
      font-size: 0.7rem;
    }
  }
}

nav ul a {
  color: $base-invert !important;
}

.navbar {

  i,
  span {
    color: var(--navbar-text-color, $navbar-text-color);
  }

  ui-icon {
    color: var(--navbar-icon-color, $navbar-icon-color);
  }

  &__btn {

    &__burger {
      &:hover {
        background-color: var(--navbar-active-background, $navbar-active-background);

        ui-icon {
          color: var(--navbar-active-icon-color, $navbar-active-icon-color);
        }
      }
    }
  }

  &__menu {
    &__item {

      >div,
      >a {
        &:hover {
          background-color: var(--navbar-active-background, $navbar-active-background);

          span {
            color: var(--navbar-active-text-color, $navbar-active-text-color);
          }

          ui-icon {
            color: var(--navbar-active-icon-color, $navbar-active-icon-color);
          }
        }

        &.isSelected.isCondensed,
        &.isSelected.navbar__menu__no__child {
          background-color: var(--navbar-active-background, $navbar-active-background);

          span {
            color: var(--navbar-active-text-color, $navbar-active-text-color);
          }

          ui-icon {
            color: var(--navbar-active-icon-color, $navbar-active-icon-color);
          }
        }
      }
    }

    &__level2,
    &__level3 {
      &>li {
        &.navbar__menu__with__child {

          >div:hover,
          >a:hover,
          >a.isSelected.isCondensed,
          >div.isSelected.isCondensed {
            background-color: var(--navbar-active-background, $navbar-active-background);

            span {
              color: var(--navbar-active-text-color, $navbar-active-text-color);
            }

            ui-icon {
              color: var(--navbar-active-icon-color, $navbar-active-icon-color);
            }
          }
        }

        &.navbar__menu__no__child {

          >a.isSelected,
          >div.isSelected {
            background-color: var(--navbar-active-background, $navbar-active-background);

            span {
              color: var(--navbar-active-text-color, $navbar-active-text-color);
            }

            ui-icon {
              color: var(--navbar-active-icon-color, $navbar-active-icon-color);
            }
          }
        }
      }
    }
  }
}