.cd-nav-mobile {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  min-width: 360px;
  max-width: 640px;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0 0 4rem 0;
  background-color: var(--cd-color-panel-bg);
  color: var(--cd-color-fg-default);

  transition: all 0.2s allow-discrete;
  /* Final state of the exit animation */
  opacity: 0;
  transform: translateX(-100%);

  &:popover-open {
    display: block;
    opacity: 1;
    transform: translateX(0);
  }
  /* Needs to be after the previous &:popover-open rule
  to take effect, as the specificity is the same */
  @starting-style {
    &:popover-open {
      opacity: 0;
      transform: translateX(-100%);
    }
  }

  @media (min-width: 640px) {
    & {
      border-right: 1px solid var(--cd-color-border-default);
    }
  }

  @media (min-width: 924px) {
    &, &:popover-open {
      display: none;
    }
  }

  & header {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    padding-left: var(--cd-padding-left);
    padding-right: var(--cd-padding-right);
  }
  & .logo {
    margin-right: auto;
  }
  & .logo img {
    display: block;
    height: 100%;
    max-height: 30px;
  }

  & .themeswitch {
    border: none;
    background: none;
    outline: none;
  }
  & .cd-toggle-sidebar {
    font-size: 1rem;
    width: 4.5rem;
    line-height: 1;
    padding: 0.75rem 0.5rem;
  }
  @media (min-width: 480px) {
    & .cd-toggle-sidebar {
      font-size: 0.875rem;
    }
  }
  & .toc {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    padding-left: var(--cd-padding-left);
    padding-right: var(--cd-padding-right);
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
/* Transition for the popover's backdrop.
   ::backdrop cannot be nested */
.cd-nav-mobile::backdrop {
  transition: all 0.5s allow-discrete;
  /* Final state of the exit animation */
  backdrop-filter: blur(0);
  background-color: rgb(0 0 0 / 0%);
}
.cd-nav-mobile:popover-open::backdrop {
  backdrop-filter: blur(2px);
  background-color: rgb(0 0 0 / 15%);
}
@starting-style {
  .cd-nav-mobile:popover-open::backdrop {
    backdrop-filter: blur(0);
    background-color: rgb(0 0 0 / 0%);
  }
}