body {
  --vp-header-default__height: 5rem;
  --vp-header-default__height--sticky: 4rem;

  --vp-header-default__height-total: calc(
    var(--v-adminbar__height) +
    var(--vp-header-default__height)
  );

  --vp-header-default__height-total--sticky: calc(
    var(--v-adminbar__height) +
    var(--vp-header-default__height--sticky)
  );

  padding-top: var(--vp-header-default__height-total);
}

.p-header-default {
  position: fixed;
  z-index: 600;
  inset: var(--v-adminbar__height) 0 auto 0;

  height: var(--vp-header-default__height);

  display: flex;
  align-items: stretch;
  background-color: var(--v-color__dark--alt1);
  transition: var(--v-transition__default);
}

body.is-scrolled .p-header-default {
  height: var(--vp-header-default__height--sticky);
}

.p-header-default__logo,
.p-header-default__nav-inner {
  padding: 0.6rem;
}

.p-header-default__logo {
  display: flex;
  background-color: var(--v-color__light--alt1);
}

.p-header-default__logo-inner {
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.p-header-default__logo-inner,
.p-header-default__menu {
  border: 1px solid var(--v-color__dark--alt3);
  padding: 0.5rem;
}

.p-header-default__logo-img,
.p-header-default__logo-svg {
  display: block;
  max-width: none;
}

@media (min-width: 700px) {
  body {
    padding-top: var(--v-adminbar__height);
  }

  .p-header-default {
    position: static;
    display: block;

    background-color: transparent;

    max-width: 25rem;
    margin: auto;
    padding: 2.5rem;
  }

  .p-header-default__logo-inner,
  .p-header-default__menu {
    padding: 1.5rem;
  }

  .p-header-default,
  body.is-scrolled .p-header-default {
    height: auto;
  }

  .p-header-default__logo-img,
  .p-header-default__logo-svg {
    width: 100%;
  }
}

@media (min-width: 1000px) {
  .p-header-default {
    border: 1px solid var(--v-color__light--alt2);
  }
}