@import '../../styles/themes';

// TODO: move from here (move homepage-header class to nb-layout-header)
/deep/ ngd-homepage nb-layout-header {
  z-index: 3;
  nav {
    padding: 0;
    background: transparent !important;
    transition: all 0.6s ease-in-out;
  }
}

@include nb-install-component {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  max-width: nb-theme(content-width);
  margin: auto;
  transition: all 0.6s ease-in-out;
  height: 5rem;

  .logo-container {
    font-size: 38px;
    a {
      display: flex;
      align-items: center;
      .logo-title {
        width: 200px;
        .cls-1 {
          fill: nb-theme(color-fg-text);
        }
        .cls-2, .cls-3, .cls-4, .cls-5 {
          fill: nb-theme(color-fg-active);
        }
      }
    }
  }
  &.homepage-header {
    color: nb-theme(color-fg);
    a {
      color: nb-theme(color-fg);
    }
    max-width: 100%;
    margin: auto calc(50px - 1rem);

    .logo-container a {
      .logo-title {
        .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
          fill: #fff;
        }
        font-weight: nb-theme(font-weight-bold);
      }
      &:hover {
        color: white;
        text-decoration: none;
        text-shadow: none;
      }
    }
    .menu {
      display: none;
    }
    .menu a {
      font-weight: nb-theme(font-weight-normal);
      &.active-link {
        text-shadow: 0 2px 16px rgba(166, 173, 255, 0.6);
        &::before {
          display: none;
        }
      }
      &:hover {
        color: #a6adff;
        text-decoration: none;
        text-shadow: 0 2px 16px rgba(166, 173, 255, 0.6);
      }
    }
  }

  .menu {
    margin: auto;
    font-size: 18px;
    line-height: 4.75rem;
    font-weight: nb-theme(font-weight-ultra-bold);
    a {
      position: relative;
      display: inline-block;
      height: nb-theme(header-height);
      padding: 0 1rem;
      text-decoration: none;

      &.active-link::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 6px;
        background: nb-theme(color-fg-active);
        border-radius: 3px;
        transition: 0.3s ease-in-out;
        bottom: -3px;
        left: 0;
        box-shadow: 0px 3px 5px 0 rgba(33, 7, 77, 0.2), 0 0 8px 0 rgba(35, 255, 181, 0.3);
      }
    }
  }

  .menu-icon {
    display: none;
  }

  /deep/ nb-menu.mobile-menu {
    position: fixed;
    top: nb-theme(header-height);
    left: 0;
    width: 100vw;
    height: 0;
    overflow: hidden;
    background: nb-theme(color-bg);
    transition: height 0.3s ease-out;
    line-height: nb-theme(line-height);
    span {
      letter-spacing: -1px;
    }
    .collapsed {
      visibility: visible;
      opacity: 1;
      height: 100%;
      max-height: 100%;
    }
    i {
      display: none;
    }

    & > ul.menu-items > li.menu-item {
      & > ul.menu-items {
        margin-bottom: nb-theme(menu-group-gap);
      }
      & > a:first-child {
        font-weight: nb-theme(font-weight-bolder);
        cursor: default;
      }
    }
    a {
      &:hover:not(.active) {
        font-weight: nb-theme(menu-font-weight);
        color: nb-theme(color-fg-text) !important;
      }
      &.active {
        font-weight: nb-theme(menu-active-font-weight);
      }
    }
  }

  &.homepage-header {
    /deep/ nb-menu.mobile-menu {
      background: transparentize(nb-theme(landing-bg), 0.12);

      a {
        color: nb-theme(landing-fg-light);
      }

      .menu-items > .menu-item {
        background: none;

        a:hover {
          background: none;
          color: nb-theme(landing-fg-light) !important;
        }
      }
      .menu-item > .menu-items {
        background: none;
      }

      > .menu-items > .menu-item {
        border-bottom: none;
        &:first-child {
          border-top: none;
        }
      }
    }
  }

  @media screen and (max-width: 1500px) and (min-width: 991px) {
    padding-right: 150px;
  }

  @media screen and (max-width: 1140px) {
    span {
      display: none;
    }
  }

  @media screen and (max-width: 991px) {

    &.homepage-header {
      margin: auto;
    }
    .menu {
      display: none;
    }
    .menu-icon {
      font-size: 40px;
      display: block;
      margin: 0 0 0 auto;
      cursor: pointer;
    }

    .mobile-menu.active {
      height: calc(100vh - #{nb-theme(header-height)});
      overflow-y: scroll; /* has to be scroll, not auto */
      -webkit-overflow-scrolling: touch;
    }
  }

  @media screen and (max-width: 1140px) {
    span {
      display: none;
    }
  }
}