.vp-navbar {
  --navbar-line-height: calc(
    var(--navbar-height) - var(--navbar-padding-y) * 2
  );

  position: fixed;
  inset: 0 0 auto;
  z-index: 175;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  height: var(--navbar-height);
  padding: var(--navbar-padding-y) var(--navbar-padding-x);

  background: var(--navbar-c-bg);
  box-shadow: 0 2px 8px var(--vp-c-shadow);

  line-height: var(--navbar-line-height);
  white-space: nowrap;

  backdrop-filter: saturate(150%) blur(12px);

  transition: transform var(--vp-t-transform);

  @media print {
    display: none;
  }

  .hide-navbar &.auto-hide {
    transform: translateY(-100%);
  }

  .auto-link {
    padding: 0 0.25rem;
    color: var(--vp-c-text);

    &.route-link-active {
      color: var(--vp-c-accent);
    }

    .vp-icon {
      margin-inline-end: 0.25em;
    }
  }
}

.vp-navbar-start,
.vp-navbar-end,
.vp-navbar-center {
  display: flex;
  flex: 1;
  align-items: center;

  > * {
    position: relative;
    margin: 0 0.25rem !important;

    &:first-child {
      margin-inline-start: 0 !important;
    }

    &:last-child {
      margin-inline-end: 0 !important;
    }
  }
}

.vp-navbar-start {
  // TODO: Since start is not supported in chrome < 93 and Safari < 15.4
  // we use old ones with rtl selector here
  // justify-content: start;
  justify-content: left;

  [dir="rtl"] & {
    justify-content: right;
  }
}

.vp-navbar-center {
  justify-content: center;
}

.vp-navbar-end {
  // TODO: Since end is not supported in chrome < 93 and Safari < 15.4
  // we use old ones with rtl selector here
  // justify-content: end;
  justify-content: right;

  [dir="rtl"] & {
    justify-content: left;
  }
}