// Account menu styles.
// Note: Admin menu and user setting menu use styles inherited from Raw with
// color values specified in Primary theme bootstrap-variable.scss

// To change section color, simply change color value.
$home-color: scale-color($theme-primary-color, $lightness: 10%);
$content-color: $theme-accent-color; // red
$myportfolio-color: $theme-accent-color-two; // orange
$groups-color: $theme-secondary-color; // green

// Menu section variable array
// 1) Section name
// 2) Section icon
// 3) Main color (see colour value above)
// 4) Lighter shade (can be specified in hex,rgba value)
// 5) Darker shade (can be specified in hex,rgba value)
// 6) Light focus shad (can be specified in hex,rgba value)
$menu-styles: (
  ("home", $home-color, scale-color($home-color, $lightness: -2%), scale-color($home-color, $lightness: -5%), scale-color($home-color, $lightness: 50%)),
  ("create", $content-color, scale-color($content-color, $lightness: -10%), scale-color($content-color, $lightness: -10%), scale-color($content-color, $lightness: 50%)),
  ("engage", $myportfolio-color, scale-color($myportfolio-color, $lightness: -2%), scale-color($myportfolio-color, $lightness: -5%), scale-color($myportfolio-color, $lightness: 50%)),
  ("manage", $groups-color, scale-color($groups-color, $lightness: -2%), scale-color($groups-color, $lightness: -5%), scale-color($groups-color, $lightness: 50%))
);

.navbar-main .navbar-nav {
    // Override basic style color specified in Bootstrap variables
    > li {
        > a,
        > button.menu-dropdown-toggle {
            font-weight: $font-weight-bold;
            border-color: transparent;
            &:before {
                @include fonttype(solid);
                padding-right: $spacing-sm;
                font-size: 1.1875rem; // 19px;
                color: $white;
            }
        }
    }
    .child-nav {
      .active > a {
          background-color: $white;
          &:focus,
          &:hover {
              background-color: $white;
              color: $theme-text-color;
          }
      }
    }

    @each $section in $menu-styles {
        > .#{nth($section, 1)} {
            > a,
            > button.menu-dropdown-toggle {
                background-color: #{nth($section, 2)};
                &:focus,
                &:hover {
                    background-color: #{nth($section, 3)};
                    outline-color: #{nth($section, 5)};

                    // navbar menu children toggles
                    .icon.navbar-showchildren {
                        background-color: #{nth($section, 4)};
                    }
                }

                // navbar menu children toggles
                .icon.navbar-showchildren {
                    background-color: #{nth($section, 2)};
                }
            }

            &.active > a,
            &.active > button.menu-dropdown-toggle {
                &:before {
                    color: #{nth($section, 2)};
                    &:focus,
                    &:hover {
                        background-color: #{nth($section, 3)};
                    }
                }
            }

            .child-nav li {
                a {
                    background-color: #{nth($section, 4)};
                    &:focus,
                    &:hover {
                        background-color: #{nth($section, 2)};
                        outline-color: #{nth($section, 5)};
                    }
                }
                &.active a {
                    background-color: $white;
                    &:focus,
                    &:hover {
                        color: $theme-text-color;
                    }
                }
            }
        }
    }
}
