.#{$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: $black;
  background-color: $white;

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

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

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

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

  &__right {
    justify-content: flex-end;

    &-icon {
        font-size: $nav-bar-font-size;
      .aid {
        font-size: $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;
    }
  }
}