/*
 * Copyright (c) 2022, 2023 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
 *
 * SPDX-License-Identifier: EPL-2.0
*/

// Animations
@keyframes header-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes menu-slide-in {
  from {
    margin-top: -10rem;
  }

  to {
    margin-top: 0;
  }
}

.header-wrapper {
  background-color: @white;
  font-weight: 700;

  // Toolbar
  .header-toolbar {
    padding: 1.25rem 0;
    background-color: @header-toolbar-background;
  }

  .header-toolbar-row {
    display: flex;
    justify-content: flex-end;

    & > * {
      margin-left: 2rem;
    }

    .toolbar-btn > button {
      .reset-button;

      &:focus-visible {
        .outline-browser-default;
      }
    }

    & > .dropdown .dropdown-toggle:hover {
      color: @brand-primary;
    }

    & > .dropdown.open .dropdown-toggle {
      color: @brand-primary;
    }
  }

  .toolbar-search-bar-wrapper {
    .reset-dropdown;
    min-width: 30rem;
    margin-top: 1.5rem;
    background-color: transparent;
  }

  .search-bar {
    animation-name: toolbar-search-bar-show;
    animation-duration: 0.2s;
  }

  .toolbar-user-menu {
    min-width: 20rem;
  }

  // Navbar
  .header-navbar-wrapper {
    padding: @navbar-padding-y 0;
    border-bottom: 1px solid @navbar-border-color;
    background-color: @white;
  }

  .header-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: @navbar-height;
  }

  .header-navbar-nav {
    display: none;
  }
  
  // Make the brand and end sections take full space. This centers the nav
  // part.
  .header-navbar-brand,
  .header-navbar-end {
    flex: 1;
  }
  
  // The end section is right-aligned.
  .header-navbar-end {
    display: flex;
    justify-content: flex-end;
  }

  .header-navbar-nav-links {
    .list-unstyled;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;

    button {
      font-weight: inherit;
    }
  }

  .navbar-nav-links-item {
    display: flex;
    align-items: center;

    button {
      padding: 0;
    }
  }

  .nav-link-active {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: calc(50% + @navbar-padding-y + (@navbar-height / 2) - 0.5rem);
      z-index: 1000;
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background-color: @brand-primary;
      animation-name: header-fade-in;
      animation-duration: 0.2s;
    }

    &::after {
      content: "";
      position: absolute;
      top: calc(50% + @navbar-padding-y + (@navbar-height / 2));
      left: 0;
      z-index: 1000;
      display: inline-block;
      width: 100%;
      height: 1px;
      background-color: @brand-primary;
      animation-name: header-fade-in;
      animation-duration: 0.2s;
    }
  }

  .header-navbar-end-download-btn {
    display: none;
  }

  .mobile-menu-btn {
    .reset-button();
  }

  @media (min-width: @screen-sm-min) {
    .header-navbar-nav {
      display: flex;
      align-items: stretch;
    }

    .header-navbar-nav-links {
      display: flex;

      & > * {
        margin-right: 1rem;
      }
    }

    .header-navbar-end-download-btn {
      display: inline-block;
    }

    .mobile-menu-btn {
      display: none;
    }
  }

  // Mega Menu
  .eclipsefdn-mega-menu {
    display: none;
  }

  @media (min-width: @screen-sm-min) {
    .eclipsefdn-mega-menu {
      position: absolute;
      z-index: 999;
      display: block;
      width: 100%;
      background-color: @header-background;
      box-shadow: 0px 10px 10px 0px @header-shadow-color;
    }
    
    .menu-heading {
      width: 100%;
    }

    .mega-menu-submenu-featured-story {
      display: none;
    }

    .mega-menu-submenu-featured-story-btn {
      display: block;
    }

    .mega-menu-submenu {
      display: flex;
      padding-top: 4rem;
      padding-bottom: 4rem;
    }

    .mega-menu-submenu-featured-story {
      flex-basis: 20%;
      flex-shrink: 0;
      margin-right: @header-menu-spacing;
    }

    .mega-menu-submenu-links-section {
      display: flex;
      width: 100%;
    }

    .mega-menu-submenu-links {
      max-width: 24ch;
      margin-right: @header-menu-spacing;

      ul {
        .list-unstyled;

        li {
          margin-bottom: 1.2rem;

          a {
            .link-unstyled;
          }
        }
      }
    }

    .mega-menu-submenu-ad-wrapper {
      font-weight: 500;
      color: darken(@header-ads-text-color, 25%);

      a {
        .link-unstyled;
        display: block;
        margin-top: 1rem;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .eclipsefdn-mega-menu-promo-content {
      min-width: @header-ads-min-width;

      .featured-story-description {
        text-align: left;
      }
    }
  }

  @media (min-width: @screen-lg-min) {
    .mega-menu-submenu-featured-story {
      display: inline-block;
    }

    .mega-menu-submenu-featured-story {
      display: inline-block;
    }

    .mega-menu-submenu-featured-story-heading {
      color: @brand-primary;
    }

    .mega-menu-submenu-featured-story-text {
      font-weight: normal;
    }
  }
}

// Mobile Menu
.mobile-menu {
  ul {
    .list-unstyled;
    margin: 0;

    a {
      .link-unstyled;
    }
  } 

  .mobile-menu {
    margin: 0;
    padding: 0;
  }

  .mobile-menu-sub-menu {
    width: 100%;
  }

  .mobile-menu-sub-menu > li:last-child > .mobile-menu-item {
    border: none;
  }

  .mobile-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
    border-bottom: 1px @header-border-color solid;
  }

  .mobile-menu-sub-menu .mobile-menu-item {
    background-color: darken(@mobile-menu-background-color, 5%);
    border-bottom-color: darken(@mobile-menu-border-color, 5%);

    & + .mobile-menu-sub-menu-wrapper .mobile-menu-sub-menu .mobile-menu-item {
      background-color: darken(@mobile-menu-background-color, 12.5%);
      border-bottom-color: darken(@mobile-menu-border-color, 12.5%);
    }
  }

  // Without this rule, the mobile menu dropdown can't be toggled when the user
  // taps the menu item text or icon.
  .mobile-menu-dropdown-toggle > * {
    pointer-events: none;
  }

  .mobile-menu-dropdown {
    .mobile-menu-sub-menu-wrapper {
      overflow: hidden;
    }
    .mobile-menu-sub-menu:not(.hidden) {      
        animation: menu-slide-in 0.2s ease-out;
    }
  }

  @media (min-width: @screen-sm-min) {
    display: none;
  }
}
