@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion) {
  @view-transition {
    navigation: none;
  }
}

::view-transition-group(expense-nav-link),
::view-transition-group(expense-nav-link-icon),
::view-transition-group(expense-nav-link-text),
::view-transition-group(category-nav-link),
::view-transition-group(category-nav-link-icon),
::view-transition-group(category-nav-link-text),
::view-transition-group(settings-nav-link),
::view-transition-group(settings-nav-link-icon),
::view-transition-group(settings-nav-link-text) {
  z-index: 10000;
}

::view-transition-group(nav-link-active) {
  z-index: 1000;
}

::view-transition-group(nav-list) {
  z-index: 100;
}

::view-transition-new(nav-list),
::view-transition-old(nav-list),
::view-transition-new(expense-nav-link-text),
::view-transition-old(expense-nav-link-text),
::view-transition-new(category-nav-link-text),
::view-transition-old(category-nav-link-text),
::view-transition-new(settings-nav-link-text),
::view-transition-old(settings-nav-link-text),
::view-transition-old(expense-title),
::view-transition-new(expense-title),
::view-transition-new(expense-list-title),
::view-transition-old(expense-list-title),
::view-transition-new(nav-link-active),
::view-transition-old(nav-link-active) {
  block-size: 100%;
}