//
// Header
//

// General mode
.app-header-menu {
  background-color: #ff7600;
    .menu {
        .menu-item {
          @include menu-link-default-state(
            $title-color: #010101, // Change menu title color
            $icon-color: #010101, // Change menu icon color
            $bullet-color: #010101,
            $arrow-color: #010101,
            $bg-color: null
        );

        @include menu-link-hover-state(
          $title-color: #010101, // Set menu link hover color to black
          $icon-color:#010101,
          $bullet-color: #010101,
          $arrow-color: #010101,
          $bg-color: null
      );

           @include menu-link-show-state(
                    $title-color: var(--#{$prefix}primary-inverse),
                    $icon-color: var(--#{$prefix}primary-inverse),
                    $bullet-color: var(--#{$prefix}primary-inverse),
                    $arrow-color: var(--#{$prefix}primary-inverse),
                    $bg-color: null
                );
            @include menu-link-here-state(
              $title-color: #010101, // Set menu link hover color to black
              $icon-color:#010101,
              $bullet-color: #010101,
              $arrow-color: #010101,
              $bg-color: null
            );

            @include menu-link-active-state(
              $title-color: #010101, // Set menu link active color to black
              $icon-color: #010101,
              $bullet-color: #010101,
              $arrow-color: #010101,
              $bg-color: null
          );

        }
    }

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


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

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

// Desktop mode
@include media-breakpoint-up(lg) {
    .app-header-menu {
        .menu {
            // Menu root item
            > .menu-item {
                margin-right: 0.5rem;

                > .menu-link {
                    padding-top: 0.775rem;
                    padding-bottom: 0.775rem;
                    font-weight: $font-weight-semibold;
                }

                @include menu-link-here-state(
                    $title-color: var(--#{$prefix}primary),
                    $icon-color: var(--#{$prefix}primary),
                    $bullet-color: var(--#{$prefix}primary),
                    $arrow-color: var(--#{$prefix}primary),
                    $bg-color: var(--#{$prefix}app-header-base-menu-link-bg-color-active)
                );
            }
        }
    }
}

// Tablet & mobile modes
@include media-breakpoint-down(lg) {
	.app-header {
		.page-title {
            display: none !important;
        }
	}
}
