@media (min-width: 80.01rem) {
  .AppNavigation {
    border-right: 1px solid var(--colorBrand);
    padding-right: 1.25rem;
    margin-right: 1.25rem;
  }
}

@media (max-width: 80rem) {
  .AppNavigation {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    max-width: calc(100vw - 2rem);
    background: var(--colorThemeAccent);
    box-shadow: 0 0 32px #0000005c;
    padding: 0;
    z-index: var(--layerPageZIndex);
    overflow: auto;
    transition: var(--animationBase);
    transform: translateX(100%);
    opacity: 0;
    border-right-width: 0;
  }
  .AppNavigation.is-opened {
    transform: translateX(0);
    opacity: 1;
    width: 20rem;
  }
}

.AppNavigation-closer {
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--colorBrand);
  color: hsl(0, 0%, calc((var(--colorBrand-l) - 60) * -100%));
  transition: var(--animationBase);
  cursor: pointer;
}

.AppNavigation-closer:hover, .AppNavigation-closer:active, .AppNavigation-closer:focus {
  background: hsl(var(--colorBrand-h), calc(var(--colorBrand-s) * 1%), calc(var(--colorBrand-l) * 0.8 * 1%));
}

@media (min-width: 80.01rem) {
  .AppNavigation-closer {
    display: none;
  }
}

.AppNavigation-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spaceLg);
}

@media (max-width: 80rem) {
  .AppNavigation-list {
    flex-direction: column;
    padding: var(--spaceLg);
    gap: var(--spaceXs);
  }
}

.AppNavigation-button {
  margin-left: var(--spaceLg);
  width: calc(100% - var(--spaceLg) - var(--spaceLg));
  justify-content: center;
}

@media (min-width: 48.01rem) {
  .AppNavigation-button {
    display: none;
  }
}

/*# sourceMappingURL=navigation.min.css.map */