// ┌────────┐
// │ Topnav │
// └────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/patterns/#top-nav
//  ↳ patterns → _top-nav.md
@mixin top-nav {
  position: relative;
  @include avenir-regular();
  border-bottom: 1px solid $lightest-gray;
  background-color: $white;
  z-index: 100;
  .esri-logo {
    margin-top: 1rem;
  }

  .sign-in {
    padding-top: $baseline
  }
}

  @mixin top-nav-title {
    @include avenir-regular();
    @include font-size(1);
    @include left();
    margin-right: 1.5rem;
    padding-top: 1.125rem;
    padding-bottom: 1.25rem;
    line-height: 1.5rem;
    color: $off-black;
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        white-space: nowrap;
        margin-right: 0;
        margin-left: 1.5rem;
      }
    }
    &:hover {
      text-decoration: none;
    }
  }

  @mixin top-nav-list {
    @include left();
    padding: 0;
    .top-nav-link + .top-nav-link {
      margin-left: .75em;
      @if ($include-right-to-left) {
        html[dir="rtl"] & {
          margin-left: 0;
          margin-right: .75em;
        }
      }
    }
    &.right {
      @include right();
    }
  }

  @mixin top-nav-style {
    @include font-size(-1);
    color: $off-black;
    padding: .75*$baseline 0;
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: top;
  }

  @mixin top-nav-link {
    @include font-size(-1);
    color: $off-black;
    padding: 1.1625rem 0 calc(1.1625rem - 4px) 0;
    border: none;
    border-bottom: 4px solid transparent;
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    &:hover, &:focus {
      color: $blue;
      border-bottom-color: $blue;
      text-decoration: none;
    }
    &:focus {
      outline: none;
    }
    &.is-active {
      border-bottom-color: $blue;
    }
  }

  @mixin top-nav-logo {
    margin-top: 0.75*$baseline;
  }

  @mixin top-nav-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  @mixin top-nav-flex-list {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%
  }

  @mixin top-nav-flex-title {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    text-align: center;
  }

  @mixin sign-in {
    @include right();
    padding-left: $baseline / 4;
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        padding-left: 0;
        padding-right: $baseline / 4;
      }
    }
    margin-top: -0.7rem;
  }

@if $include-top-nav == true {
  .top-nav {@include top-nav();}
    .top-nav-title {@include top-nav-title();}
    .top-nav-list {@include top-nav-list();}
    .top-nav-link {@include top-nav-link();}
    .top-nav-flex {@include top-nav-flex();}
      .top-nav-flex-list {@include top-nav-flex-list();}
      .top-nav-flex-title {@include top-nav-flex-title();}
  .sign-in {@include sign-in();}
}
