//
// Hashicorp header
// - Shared throughout projects
// - Edits should not be made here
// --------------------------------------------------

#header {
  position: relative;
  color: black;
  text-rendering: optimizeLegibility;
  margin-bottom: 0;
  transition: all 1s ease;

  &.white{
    color: white;
    .navbar-brand {
      .logo {
        color: white;
      }

      .by{
        color: white;
        font-weight: 300;
        svg{
          path,
          polygon{
            fill: white;
          }
        }
      }
    }

    .main-links,
    .external-links {
      li > a {
        &:hover{
          opacity: 1;
        }
      }
    }

    .nav > li > a:hover, .nav > li > a:focus {
      color: white;
    }

    .navbar-header{
      .navbar-toggle{
        .icon-bar{
          border: 1px solid white;
        }
      }
    }
  }

  .navbar-header{
    .navbar-toggle{
      height: $header-height;
      margin: 0;
      padding-right: 15px;
      border-radius: 0;
      .icon-bar{
        border: 1px solid $black;
        border-radius: 0;
      }
    }
  }

  .navbar-brand {
    display: block;
    height: $header-height;
    padding: 0;
    margin: 0 10px 0 0 ;

    .logo{
      display: inline-block;
      height: $header-height;
      vertical-align:top;
      padding: 0;
      line-height: $header-height;
      padding-left: $project-logo-width + $project-logo-pad-left;
      background-position: 0 center;
      @include transition(all 300ms ease-in);

      &:hover{
        @include transition(all 300ms ease-in);
        text-decoration: none;
      }
    }

    .by{
      display: inline-block;
      vertical-align:top;
      height: $header-height;
      margin-left: 3px;
      padding-top: 2px;
      color: black;
      line-height: $header-height;
      font-family: $header-font-family;
      font-weight: 600;
      font-size: 0;
      text-decoration: none;

      .svg-wrap{
        font-size: 13px;
      }

      svg{
        &.svg-by{
          width: $by-hashicorp-width;
          height: $by-hashicorp-height;
          margin-bottom: -4px;
          margin-left: 4px;
        }

        &.svg-logo{
          width: 16px;
          height: 16px;
          margin-bottom: -3px;
          margin-left: 4px;
        }

        path,
        polygon{
          fill: black;
          @include transition(all 300ms ease-in);

          &:hover{
            @include transition(all 300ms ease-in);
          }
        }
        .svg-bg-line{
          @include transition(all 300ms ease-in);

          &:hover{
            @include transition(all 300ms ease-in);
          }
        }
      }
    }
  }

  .external-links {
    li {
      position: relative;

      svg path{
        @include transition( all 300ms ease-in );
      }

      &:hover{
        svg path{
          @include transition( all 300ms ease-in );
        }
      }

      &.download{
        margin-right: 10px;
      }

      > a {
        padding-left: 12px !important;
        svg{
          position: absolute;
          left: -12px;
          top: 50%;
          margin-top: -7px;
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .main-links{
    margin-right: $nav-margin-right * 2;
  }

  .main-links,
  .external-links {
    li > a {
      @include hashi-a-style();
      margin: 0 10px;
      padding-top: 1px;
      line-height: $header-height;
    }
  }

  .nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
    color: $black;
    @include transition( all 300ms ease-in );
  }
}

@media (max-width: 414px) {
  #header {
    .navbar-header{
      .navbar-toggle{
        padding-top: 10px;
        height: $header-mobile-height;
      }
    }

    .navbar-brand {
      height: $header-mobile-height;

      .logo{
        height: $header-mobile-height;
        line-height: $header-mobile-height;
      }
      .by{
        height: $header-mobile-height;
        line-height: $header-mobile-height;
        padding-top: 0;
      }
    }
    .main-links,
    .external-links {
      li > a {
        line-height: $header-mobile-height;
      }
    }
  }
}
