@import 'variable.scss';

/* ==========================================================================
 *
 * File Name:         Navbar
 * Description:       Responsive Navigation Grid
 * Editing Details:   Change any variable you want to override to the values
                      you choose and recompile this SASS file
 *
 ============================================================================ */
//General navbar
 .navbar {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   width: 100%;
   align-items: center;
   justify-content: center;
 }

// If there is no navbar logo, comment out .navbar-logo and change
// the flex-basis of .nav-item to 100%;

.navbar-logo, .nav-item {
  display: flex;
  flex-basis: 10%;
  height: $height-xl;
  align-items: center;
  justify-content: center;
  padding: $padding-xs;

  .nav-img {
    width: auto;
    max-height: 70%;
  }
}

 .nav-item {
   flex-basis: 90%;
   padding: 0 $padding-medium;
   justify-content: flex-start;
   align-items: center;

   ul {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     list-style: none;
     margin: 0.5rem 0;
     padding: 0;

      li {
        display: inline-flex;

        a {
          text-decoration: none;
          color: map-get($accent, acai);
          font-family: $primary-font;
          font-size: 1.2rem;
          letter-spacing: 1.3px;
          margin: 0 $margin-small;
          font-weight: $font-regular;
        }

        a:hover {
        color: map-get($accent,kale);
        text-transform: capitalize;
        letter-spacing: 1.5px;
        }
      }
    }
}

.nav-left {
justify-content: flex-start;
text-align: left;
}

.nav-center {
justify-content: center;
text-align: center;
}

.nav-right {
  justify-content: flex-end;
  text-align:  right;
}

// Navbar for smart phone

@media (max-width: map-get($breakpoints, sm)) {

  .navbar {
    align-items: center;
    justify-content: center;

    .nav-item, .navbar-logo {
      height: auto;
      flex-basis: 100%;
      text-align: center;
      align-items: flex-start;
      justify-content: center;
    }

    ul {
      align-items: center;
      justify-content: center;
      margin: 0.8rem 0;
    }

    .navbar-logo {
      height: $height-large;
      align-items: center;

      .nav-img {
        width: auto;
        max-height: 70%;
      }
    }
  }
}

//navbar color styling:
@mixin navbar-text-colour ($colour) {
  color: $colour;

  &:hover {
    color: darken($colour, 5%);
  }

  &:active {
    color: darken($colour, 25%);
  }
}
.navbar-beet {
  @include navbar-text-colour (map-get($accent,acai));
  background-color: map-get($accent,beet);
}
.navbar-kale {
  @include navbar-text-colour (map-get($accent,lettuce));
  background-color: map-get($accent,kale);
}
.navbar-water {
  @include navbar-text-colour (map-get($accent,wave));
  background-color: map-get($accent,deepwater);
}
.navbar-mute {
  @include navbar-text-colour (map-get($basic,dark));
  background-color: map-get($basic,main-gray);
}