.app-navigation {
  --navigation-width: 30rem;

  width: 100svw;
  max-width: min(calc(100vw - var(--gutter) * 2), var(--navigation-width));
  height: 100svh;
  max-height: unset;
  position: fixed;
  top: 0;
  margin-inline-start: 0;
  padding: 0;
  border: none;
  background: var(--color-light);
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition:
    display var(--transition-fade) allow-discrete,
    overlay var(--transition-fade) allow-discrete,
    transform var(--transition-movement);
  font-size: var(--size-step-0);

  --flow-space: var(--space-m);

  a[href] {
    text-decoration: none;
  }

  ul {
    --flow-space: 0;
    list-style: none;
    padding-inline-start: 0;

    li {
      padding-inline: 0;
    }

    a,
    span {
      display: block;
      padding-block: var(--space-s);
      padding-inline: var(--space-m);
      border-block: 1px solid transparent;
      color: var(--color-brand);

      &:hover {
        background: var(--color-tint);
        border-color: var(--color-mid);
      }

      &:focus,
      &:focus-visible {
        outline: none;
        box-shadow: none;
        background: var(--color-tint);
        border-color: var(--color-brand);
        position: relative;
        z-index: 2;
      }
    }
  }
}

.app-navigation[open] {
  transform: translateX(0);
}

@starting-style {
  .app-navigation[open] {
    transform: translateX(-100%);
  }
}

.app-navigation::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    background-color var(--transition-fade),
    display var(--transition-fade) allow-discrete,
    overlay var(--transition-fade) allow-discrete;
}

.app-navigation[open]::backdrop {
  background-color: rgb(0 0 0 / 40%);
}

@starting-style {
  .app-navigation[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}