@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$navbar-bg-color: map-get($denali-brand-colors,"500") !default;
$navbar-height: 60px !default;
$navbar-item-text-color: map-get($denali-grey-colors,"100") !default;
$navbar-item-hover-text-color: rgba(map-get($denali-grey-colors,"100"), 0.4) !default;
$navbar-item-active-text-color: map-get($denali-grey-colors,"100") !default;
$navbar-item-active-border-color: map-get($denali-brand-colors,"300") !default;
$navbar-responsive-bg-color: #19375F !default;
$navbar-responsive-menu-bg-color: #334D71 !default;

@mixin navbar-default {
  .nav {
    box-sizing: border-box;
    height: $navbar-height;
    width: 100%;
    background: $navbar-bg-color;
    position: relative;

    &.is-fixed-top {
      position: fixed;
      top: 0;
    }

    .nav-center,
    .nav-right {

      .nav-item,
      .nav-icon,
      .menu--nav,
      .nav-control {
        display: block;
      }

      @media (min-width: 899px) {
        display: inline-block;
        background: transparent;

        .nav-item,
        .nav-icon,
        .menu--nav,
        .nav-control {
          display: inline-block;
        }
      }
    }


    // Left
    .nav-left {
      padding-left: 12px;
      padding-right: 12px;
      display: inline-block;
      vertical-align: top;
      height: $navbar-height;
      width: 100%;

      .nav-item,
      .nav-icon,
      .menu--nav,
      .nav-control {
        height: $navbar-height;
        padding: 18px 8px;

        @media (min-width: 899px) {
          padding: 18px 12px;
        }
      }

      @media (min-width: 899px) {
        width: 300px;
        padding-left: 18px;
        padding-right: 0px;
      }
    }

    // Center
    .nav-center {
      @media (min-width: 899px) {
        // float: left;
      }
    }

    // Right
    .nav-right {
      padding-right: 0px;

      @media (min-width: 899px) {
        float: right;
        padding-right: 18px;
      }
    }

    .nav-responsive {
      position: absolute;
      left: 0;
      right: 0;
      height: calc(100vh - 60px);
      background: $navbar-responsive-bg-color;
      opacity: 0;
      visibility: hidden;
      overflow: auto;
      
      &.is-active {
        opacity: 1;
        visibility: visible;
      }

      @media (min-width: 899px) {
        float: right;
        width: calc(100% - 300px);
        opacity: 1;
        visibility: visible;
        height: $navbar-height;
        background: transparent !important;
        position: relative;
        overflow: inherit;
      }
    }

    // All Items
    .nav-item,
    .nav-icon,
    .menu--nav,
    .nav-control {
      display: inline-block;
      vertical-align: top;
      height: 54px;
      padding: 16px 20px;
      position: relative;

      @media (min-width: 899px) {
        height: $navbar-height;
        padding: 18px 12px;
      }
    }

    // Brand
    .nav-brand {
      width: auto;
      padding: 13px 12px;
      height: $navbar-height;
    }

    // Item & Icon (Text)
    .nav-item,
    .nav-icon {
      color: $navbar-item-text-color;
      font-size: 1.6rem;

      .icon-name {
        margin-left: 10px;

        @media (min-width: 899px) {
          display: none;
        }
      }

      &.is-active {
        box-shadow: inset 4px 0 0 $navbar-item-active-border-color;

        @media (min-width: 899px) {
          box-shadow: inset 0 -4px 0 $navbar-item-active-border-color;
        }
      }

      &:hover,
      &:focus {
        color: $navbar-item-hover-text-color;
      }
    }

    // Menus
    .menu.menu--nav {
      color: $navbar-item-text-color;
      padding: 0px !important;
      height: auto;

      .menu-content {
        margin-top: -8px;
      }

      @media (max-width: 898px) {
        position: unset;

        .menu-content {
          height: 0px;
          overflow: hidden;
          padding: 0px;
          border-radius: 0px;
          border: none;
          box-shadow: none;
          width: 100%;
          margin-top: 0px;
          background-color: transparent;

          > * {
            display: block;
            height: 40px;
            background: $navbar-responsive-menu-bg-color;
            padding: 10px 20px;
            color: $navbar-item-text-color;

            &:hover,
            &:focus {
              color: $navbar-item-active-text-color;
            }
          }

          &:before,
          &:after {
            display: none;
          }
        }

        &.is-active > .menu-content,
        .menu-trigger:hover+.menu-content,
        .menu-trigger:focus+.menu-content,
        .menu-content:hover {
          height: auto;
        }
      }
    }

    // Nav Control
    .nav-control {
      padding: 9px 12px;
      color: $navbar-item-text-color;

      > * {
        width: 100%;
      }

      @media (min-width: 899px) {
        padding: 12px 12px;
      }
    }
  }
}

@mixin navbar-theme {
  .nav {
    height: $navbar-height;
    background: $navbar-bg-color;
    // Left
    .nav-left {
      height: $navbar-height;
      .nav-item,
      .nav-icon,
      .menu--nav,
      .nav-control {
        height: $navbar-height;
      }
    }
    .nav-responsive {
      background: $navbar-responsive-bg-color;
      @media (min-width: 899px) {
        height: $navbar-height;
      }
    }
    // All Items
    .nav-item,
    .nav-icon,
    .menu--nav,
    .nav-control {
      @media (min-width: 899px) {
        height: $navbar-height;
      }
    }
    // Brand
    .nav-brand {
      height: $navbar-height;
    }
    // Item & Icon (Text)
    .nav-item,
    .nav-icon {
      color: $navbar-item-text-color;
      &.is-active {
        box-shadow: inset 4px 0 0 $navbar-item-active-border-color;
        @media (min-width: 899px) {
          box-shadow: inset 0 -4px 0 $navbar-item-active-border-color;
        }
      }
      &:hover,
      &:focus {
        color: $navbar-item-hover-text-color;
      }
    }
    // Menus
    .menu.menu--nav {
      color: $navbar-item-text-color;
      @media (max-width: 898px) {
        .menu-content {
          >* {
            background: $navbar-responsive-menu-bg-color;
            color: $navbar-item-text-color;

            &:hover,
            &:focus {
              color: $navbar-item-active-text-color;
            }
          }
        }
      }
    }
    // Control
    .nav-control {
      color: $navbar-item-text-color;
    }
  }
}