.banner .nav li {
  @extend .nav-item;
}

.banner .nav a {
  @extend .nav-link;
}

nav.navbar {
  position: fixed;
  width: 100%;
  z-index: 100;
  background: transparent;
  transition: all 200ms linear;

  .admin-bar & {
    margin-top: 32px;
  }

  .navbar-toggler {
    outline: none;
    svg.svg-inline--fa {
      transition: all 200ms linear;
      color: map_get($theme-colors, white);
      width: 1.5em;
      height: 1.5em;
    }
    &:hover, &:focus, &:active {
      outline: none;
      svg.svg-inline--fa {
        color: map_get($theme-colors, secondary);
      }
    }
  }
  .header-menu {
    display: -webkit-box;
    ul.navbar-nav {
      display: flex;
      align-items: center;
      li.nav-item {
        a.nav-link {
          padding: 8px 8px;
          color: white;
          line-height: 1;
          transition: all 200ms linear;
          @include font(sans-serif, medium);
          @include font-size(button-normal);
          &:hover {
            transition: all 200ms linear;
            color: map_get($theme-colors, secondary);
            // Specific styling for branded icons.
          }
        }
      }
    }
    ul.social {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
      li.nav-item {
        a.nav-link {
          padding: 8px 4px;
          &:hover {
            transition: all 200ms linear;
            color: map_get($theme-colors, border-primary);
            svg.svg-inline--fa.fa-facebook {
              color: #3C5999;
            }
            svg.svg-inline--fa.fa-linkedin {
              color: #0077b5;
            }
            svg.svg-inline--fa.fa-instagram * {
              fill: url(#rg);
              transition: fill 200ms linear;
            }
            svg.svg-inline--fa {
              transition: all 200ms linear;
            }
          }
          svg.svg-inline--fa {
            transition: all 200ms linear;
            width: 2em;
            height: 2em;
            color: map_get($theme-colors, white);
          }
          svg.svg-inline--fa.fa-instagram * {
            fill: white;
            transition: fill 200ms linear;
          }
        }
      }
    }
  }
  .navbar-brand {
    font-size: 0;
    line-height: 0;
    svg {
      height: 45px;
      path {
        transition: fill 200ms linear;
      }
    }
  }
}

// White color for logo svg
nav.navbar.before-scroll {
  .navbar-brand {
    svg {
      path {
        fill: white;
      }
    }
  }
}

nav.navbar.scrolled {
  background: map_get($theme-colors, primary);
  box-shadow: 0 8px 11px 0 map_get($theme-colors, shadow);
  .navbar-toggler {
    svg.svg-inline--fa {
      color: map_get($theme-colors, text-light);
      &:hover, &:focus {

      }
    }
  }
  ul.navbar-nav {
    li.nav-item {
      a.nav-link {
        color: map_get($theme-colors, text-light);
        &:hover {
          color: map_get($theme-colors, secondary);
        }
      }
    }
  }
  ul.social {
    li.nav-item {
      a.nav-link {
        svg.svg-inline--fa.fa-facebook {
          color: #3C5999;
        }
        svg.svg-inline--fa.fa-linkedin {
          color: #0077b5;
        }
        svg.svg-inline--fa.fa-instagram * {
          fill: url(#rg);
        }
        svg.svg-inline--fa {
          transition: all 200ms linear;
        }
      }
    }
  }
}

