.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg--main-thick);
}

.navbar--sticky {
  .navbar { position: sticky; }
}

.navbar__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: calc(var(--content-width) + 15rem);

  .calendar & {
    max-width: none;
  }
}

.navbar__logo {
  display: flex;
  align-items: center;
  width: 9.2rem;
  height: 3.2rem;
  margin: 0.8rem 0;
  background: url("/assets/logos/hey-logo-no-hand-55c226fe.svg") no-repeat 0.5rem center / 7rem;
  text-indent: -9999px;
  overflow: hidden;

  [data-color-scheme="dark"] & { background-image: url("/assets/logos/hey-logo-no-hand-reverse-77933d38.svg"); }

  &::before {
    content: "";
    position: absolute;
    height: 0.25em;
    width: 0.25em;
    border-radius: 50%;
    background: var(--color-txt);
    opacity: 0.33;
    margin-left: -1px;
  }

  &::after {
    content: " ";
    width: 1.2rem;
    height: 1.2rem;
    background: url("/assets/icons/arrow-down-c4e19f3d.svg") no-repeat center center / 100%;
    position: absolute;
    right: 0;
  }

  [open] & {
    &::after {
      transform: rotate(180deg);
    }
  }
}

.navbar__logo--plain,
.navbar__logo--standalone {
  &::after { display: none; }
}

.navbar__logo--plain {
  background-image: url("/assets/logos/hey-logo-caps-04e9434d.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/logos/hey-logo-caps-reverse-24153076.svg"); }

  &::before { display: none; }
}

.navbar__logo--standalone {
  margin: 0.8rem 0;
}

.navbar__left,
.navbar__right {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0;
}

.navbar__left { left: 0.4em; }
.navbar__right { right: 0.4em; }

.navbar__inbox {
  .body--inbox & { display: none; }
}

.navbar__search {
  display: none;

  .body--inbox & {
    display: initial;

    @media (min-width: 40em) { display: none; }
  }
}

.navbar__me {
  display: flex;
  align-items: center;
  font-weight: 500;
  height: 100%;

  .avatar {
    width: 3.6rem;
    height: 3.6rem;
  }
}

.navbar__menu {
  @media (max-width: 39.95em) {
    left: inherit !important;
    margin-left: 0 !important;
  }
}

.navbar__menu--hey {
  width: 44rem !important;
  margin-left: -22rem !important;

  @media (max-width: 39.95em) {
    position: fixed !important;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100vw !important;
    max-height: 91vh !important;
    border-radius: 0 !important;
  }
}

.navbar__menu--me { right: 1rem; }

.navbar__purpose {
  width: 0.8em;
  height: 0.8em;

  &::before { filter: var(--colorize-ink); }
}

.navbar__logo-icons {
  width: 8rem;
  height: 3rem;
  position: absolute;
  left: -4rem;
  margin: 0.8rem 0;
}

.navbar__logo-icon {
  width: 4rem;
  height: 3rem;
  position: absolute;
  left: 0;
  margin-left: 50%;
  text-indent: -999em;

  &::after {
    filter: var(--colorize-blue);
    content: "";
    width: 4rem;
    height: 3rem;
    position: absolute;
    top: 0;
    left: 0;
    background: url("/assets/icons/navbar-mail-94563e05.svg") no-repeat right 5px center/2.9rem;
  }

  /* Animate when changing between Mail & Calendar */
  .from-email &,
  .from-calendar & {
    animation-duration: 0.4s;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.7, -0.4, 0.4, 1.4);
    animation-fill-mode: both;
  }

  .from-email & {
    &.navbar__logo-icon--mail { animation-name: nav-slide-left; }
    &.navbar__logo-icon--calendar { animation-name: nav-slide-right; }
  }

  .from-calendar & {
    &.navbar__logo-icon--mail { animation-name: nav-slide-right; }
    &.navbar__logo-icon--calendar { animation-name: nav-slide-left; }
  }
}

/* Mail icon states */
.navbar__logo-icon--calendar {
  filter: grayscale(1); opacity: 0.66;
  margin-left: 0%;

  &::after {
    background-image: url("/assets/icons/navbar-calendar-4b05a798.svg");
  }
}

/* Calendar icon states */
.navbar__logo-icons--calendar {
  .navbar__logo-icon {
    margin-left: 0%;
  }

  .navbar__logo-icon--mail {
    filter: grayscale(1); opacity: 0.66;
  }

  .navbar__logo-icon--calendar {
    filter: grayscale(0); opacity: 1;
    margin-left: 50%;
  }
}