:root {
  --aunt-nav-bar-height: calc(44 * var(--aunt-hd));
  --aunt-nav-bar-background: var(--aunt-white-color);
  --aunt-nav-bar-z-index: var(--aunt-z-index-fixed);
  --aunt-nav-bar-color: var(--aunt-text-color);
  --aunt-nav-bar-border-color: var(--aunt-gray-1);
  --aunt-nav-bar-title-font-size: var(--aunt-font-size-lg);
  --aunt-nav-bar-title-font-weight: var(--aunt-font-weight-bold);
  --aunt-nav-bar-padding: 0 var(--aunt-padding-sm);
}
.aunt-nav-bar {
  position: relative;
  text-align: center;
  user-select: none;
  display: flex;
  align-items: center;
  height: var(--aunt-nav-bar-height);
  background: var(--aunt-nav-bar-background);
  color: var(--aunt-nav-bar-color);
  z-index: var(--aunt-nav-bar-z-index);
}
.aunt-nav-bar--safe-area-inset-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
.aunt-nav-bar--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.aunt-nav-bar--border {
  border-bottom: calc(1 * var(--aunt-hd)) solid var(--aunt-nav-bar-border-color);
}
.aunt-nav-bar__title {
  max-width: 60%;
  margin: 0 auto;
  font-weight: var(--aunt-nav-bar-title-font-weight);
  font-size: var(--aunt-nav-bar-title-font-size);
}
.aunt-nav-bar__left,
.aunt-nav-bar__right {
  position: absolute;
  display: flex;
  align-items: center;
  padding: var(--aunt-nav-bar-padding);
  cursor: pointer;
}
.aunt-nav-bar__left {
  left: 0;
}
.aunt-nav-bar__right {
  right: 0;
}