/** 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;
  }
}

md-nav-ink-bar {
  $duration: $swift-ease-in-out-duration * 0.5;
  $multiplier: 0.5;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: left top;
  will-change: transform;
  transition: transform ($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;
}
