@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

.#{$hashClassName}.cn-ui-m-nav-bar-wrapper {
  .cn-ui-m-nav-bar {
    display: flex;
    align-items: center;
    height: $m-s-44;
    border-bottom: none;
    padding: 0 $m-s-16;
    white-space: nowrap;
    color: $m-color-text-title1;
    background-color: $m-color-bg-white;

    &-safe-area {
      height: calc(constant(safe-area-inset-top));
      height: calc(env(safe-area-inset-top));
    }

    &-left,
    &-right {
      flex: 0 0 auto;
    }
    &-back + &-left-content {
      margin-left: $m-s-12;
    }
    &-title-container {
      flex: auto;
      text-align: left;
      padding: 0 $m-s-12;
      overflow: hidden;
    }
    &-title {
      overflow: hidden;
      text-overflow: ellipsis;
      justify-content: center;
      white-space: nowrap;
      font-size: $m-s-18;
    }

    &-subtitle {
      font-size: $m-s-12;
      color: $m-color-text-tip;
    }

    &-back {
      display: flex;
      align-items: center;
      padding: 6px 0;
      cursor: pointer;
      &-arrow {
        margin-right: 0;
        display: flex;
      }
    }

    &-left {
      font-size: $m-s-14;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    &-right {
      text-align: right;
    }
  }
}