dialog.sidebar {
  overflow-y: auto;
  position: fixed;

  max-width: 80%;
  width: 20rem;
  height: calc(100% - 1rem);
  max-height: calc(100vh - 1rem);
  border-radius: 1rem;
  z-index: 100;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18), 0 8px 24px -8px rgba(0, 0, 0, 0.12);

  left: .5rem;
  bottom: .5rem;
  top: .5rem;
  right: auto;
  margin: 0;
}

@media (min-width: 1024px) {
  [data-sidebar-expanded-value="false"] #app-navigation {
    width: 0;
    margin-inline-end: 0;
    opacity: 0;
    visibility: hidden;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-sidebar-animate] #app-navigation {
    transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1),
      margin-inline-end 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease, visibility 0s 220ms;
  }

  [data-sidebar-animate][data-sidebar-expanded-value="true"] #app-navigation {
    transition-delay: 0s;
  }
}

#mobile-navigation:not([open]),
#mobile-navigation:not([open])::backdrop {
  pointer-events: none;
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  #mobile-navigation:not([data-immediate]) {
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      display 220ms allow-discrete, overlay 220ms allow-discrete;
  }

  #mobile-navigation:not([data-immediate])[open] {
    transform: translateX(0);
  }

  #mobile-navigation:not([data-immediate])::backdrop {
    opacity: 0;
    transition: opacity 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete;
  }

  #mobile-navigation:not([data-immediate])[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    #mobile-navigation:not([data-immediate])[open] {
      transform: translateX(-100%);
    }

    #mobile-navigation:not([data-immediate])[open]::backdrop {
      opacity: 0;
    }
  }
}