/** Matches "md-tabs md-tabs-wrapper" style. */
$md-nav-bar-height: 48px;

.md-nav-bar {
  border-style: solid;
  border-width: 0 0 1px;
  height: $md-nav-bar-height;
  position: relative;
}

._md-nav-bar-list {
  outline: none;
  list-style: none;
  margin: 0;
  padding: 0;

  // Layout [layout='row']
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}

.md-nav-item:first-of-type {
  margin-left: 8px;
}

// override button styles to look more like tabs
.md-button._md-nav-button {
  line-height: 24px;
  margin: 0 4px;
  padding: 12px 16px;
  transition: background-color 0.35s $swift-ease-in-out-timing-function;

  &:focus {
    outline: none;
  }

  &:hover {
    background-color: inherit;
  }
}

md-nav-ink-bar {
  $duration: $swift-ease-in-out-duration * 0.5;
  $multiplier: 0.5;
  bottom: 0;
  height: 2px;
  left: auto;
  position: absolute;
  right: auto;
  background-color: black;

  &._md-left {
    transition: left ($duration * $multiplier) $swift-ease-in-out-timing-function,
        right $duration $swift-ease-in-out-timing-function;
  }
  &._md-right {
    transition: left $duration $swift-ease-in-out-timing-function,
        right ($duration * $multiplier) $swift-ease-in-out-timing-function;
  }

  // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
  // The ink bar has a transition duration applied, which means, that $ngAnimate delays the hide process.
  // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
  &.ng-animate {
    transition: none;
  }

}

md-nav-extra-content {
  min-height: 48px;
  padding-right: 12px;
}