$statusBarHeight: 20px;
$navBarHeight: 44px;

.dui-status-bar {
  width: 100%;
  &--fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: $statusBarHeight;
    @include ipx(height, constant(safe-area-inset-top));
    @include ipx(height, env(safe-area-inset-top));
    background: inherit;
    z-index: 99;
  }
  &.placeholder {
    height: $statusBarHeight;
    @include ipx(height, constant(safe-area-inset-top));
    @include ipx(height, env(safe-area-inset-top));
  }
}

.dui-nav-bar {
  position: relative;
  width: 100%;
  &.placeholder {
    height: $navBarHeight;
    &.with-status-bar {
      height: $statusBarHeight + $navBarHeight;
      @include ipx(height, calc(#{$navBarHeight} + constant(safe-area-inset-top)));
      @include ipx(height, calc(#{$navBarHeight} + env(safe-area-inset-top)));
    }
  }
  &--fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: $navBarHeight;
    background: inherit;
    z-index: 99;
  }
  &__content {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  &__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}
.dui-status-bar+.dui-nav-bar .dui-nav-bar--fixed {
  top: $statusBarHeight;
  @include ipx(top, constant(safe-area-inset-top));
  @include ipx(top, env(safe-area-inset-top));
}
.dui-nav-bar.with-status-bar {
  .dui-nav-bar--fixed {
    padding-top: $statusBarHeight;
    @include ipx(padding-top, constant(safe-area-inset-top));
    @include ipx(padding-top, env(safe-area-inset-top));
    top: 0;
    height: $statusBarHeight + $navBarHeight;
    @include ipx(height, calc(#{$navBarHeight} + constant(safe-area-inset-top)));
    @include ipx(height, calc(#{$navBarHeight} + env(safe-area-inset-top)));
  }
  .dui-nav-bar__title {
    top: calc(50% + #{$statusBarHeight / 2});
    @include ipx(top, calc(50% + constant(safe-area-inset-top) / 2));
    @include ipx(top, calc(50% + env(safe-area-inset-top) / 2));
  }
}