body, html {
  margin: 0;
}

#announcer {
  height: 0;
  overflow: hidden;
  position: fixed;
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
}
.app-container__content {
  flex: 1;
  min-height: 100vh;
  overflow: auto;
  position: relative;
  transition: width 0.3s ease-in;
  width: 100%;
}
.app-container .menu-container {
  left: 0;
  overflow: auto;
  position: relative;
  top: 0;
  transition: width 0.3s ease-out;
  width: 0;
}
.app-container.menu-expanded .app-container__content {
  transition: width 0.3s ease-out;
  width: calc(100% - 240px);
}
.app-container.menu-expanded .menu-container {
  transition: width 0.3s ease-in;
  width: calc(((30 * var(--gridSpacerVariant, var(--gridSpacer, ${unsafeCSS(foundations.grid.spacer)}))) / 16) * 1rem);
}