.#{$nav-bar-prefix-cls} {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  height: $nav-bar-height;
  padding: 0 $nav-bar-padding-x;
  color: $brand-primary;
  background-color: $white;

  &__left,
  &__title,
  &__right {
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
  }

  &__left {
    &-icon {
      font-size: $nav-bar-icon-font-size;
      width: $nav-bar-icon-font-size;
      line-height: $nav-bar-icon-font-size;
      // 图标+文字组合时 文字大小与标题一样
      & + .#{$nav-bar-prefix-cls}__left-content {
        font-size: $nav-bar-title-font-size;
        color: $gray-10;
      }
    }

    &-content {
      font-size: $nav-bar-font-size;
    }
  }

  &__title {
    justify-content: center;
    font-size: $nav-bar-title-font-size;
    font-weight: 600;
    color: $gray-10;
    white-space: nowrap;
  }

  &__right {
    justify-content: flex-end;

    &-icon {
      font-size: $nav-bar-icon-font-size;
      width: $nav-bar-icon-font-size;
      line-height: $nav-bar-icon-font-size;
    }

    &-content {
      font-size: $nav-bar-font-size;
    }
  }

  &--primary {
    color: $white;
    background-color: $brand-primary;
    & .#{$nav-bar-prefix-cls}__title {
      color: $white;
    }
  }
}