:root {
  --header-bg-color: #ff7600;
  --header-text-color: #010101;
  --header-text-color-inverse: #ffffff;
}

.app-header-menu {
  background-color: var(--header-bg-color);

  .menu {
    .menu-item {
      @include menu-link-default-state(
        $title-color: var(--header-text-color),
        $icon-color: var(--header-text-color),
        $bullet-color: var(--header-text-color),
        $arrow-color: var(--header-text-color),
        $bg-color: null
      );

      @include menu-link-hover-state(
        $title-color: var(--header-text-color),
        $icon-color: var(--header-text-color),
        $bullet-color: var(--header-text-color),
        $arrow-color: var(--header-text-color),
        $bg-color: null
      );

      @include menu-link-show-state(
        $title-color: var(--header-text-color-inverse),
        $icon-color: var(--header-text-color-inverse),
        $bullet-color: var(--header-text-color-inverse),
        $arrow-color: var(--header-text-color-inverse),
        $bg-color: null
      );

      @include menu-link-here-state(
        $title-color: var(--header-text-color),
        $icon-color: var(--header-text-color),
        $bullet-color: var(--header-text-color),
        $arrow-color: var(--header-text-color),
        $bg-color: null
      );

      @include menu-link-active-state(
        $title-color: var(--header-text-color),
        $icon-color: var(--header-text-color),
        $bullet-color: var(--header-text-color),
        $arrow-color: var(--header-text-color),
        $bg-color: null
      );
    }
  }

  .menu-extended {
    --menu-link-bg-color-active: rgba(var(--gray-100-rgb), 0.7);
    --menu-link-bg-color-hover: rgba(var(--gray-100-rgb), 0.7);

    .menu-custom-icon {
      background-color: var(--gray-100);
    }

    .menu-link {
      &.active,
      &:hover {
        .menu-custom-icon {
          background-color: var(--gray-200);
        }
      }
    }
  }
}
