@layer components {
  [data-name="app-page"] {
    @apply flex-row-0 h-dvh min-h-dvh max-h-dvh w-screen overflow-hidden overflow-x-hidden;
  }

  [data-name="app-sidebar-backdrop"] {
    @apply fixed inset-0 z-40 touch-manipulation bg-overlay-shadow;

    @variant desktop {
      @apply hidden;
    }
  }

  [data-name="app-sidebar-container"] {
    @apply fixed inset-y-0 min-w-full h-screen p-4;
    padding-top: calc(max(env(safe-area-inset-top), var(--spacing) * 4));
    padding-bottom: calc(max(env(safe-area-inset-bottom), var(--spacing) * 4));

    @variant tablet {
      @apply min-w-6/10;
    }

    @variant desktop {
      @apply relative min-w-64 max-w-72;
    }

    &:not([data-open]) {
      @apply hidden;

      @variant desktop {
        @apply block;
      }
    }
  }

  [data-name="app-sidebar-content"] {
    @apply relative flex-col-4 rounded-lg bg-surface text-on-surface w-full h-full min-h-0 overflow-hidden shadow-around-md;
    @apply transform transition-transform duration-300 ease-out;

    &:not([data-open]) {
      @apply -translate-x-full pointer-events-none;

      @variant desktop {
        @apply translate-x-0 pointer-events-auto;
      }
    }

    &[data-open] {
      @apply translate-x-0;
    }
  }

  .app-sidebar-close-button {
    @apply absolute top-1 right-1 z-10;

    @variant desktop {
      @apply hidden;
    }
  }

  .app-page-sidebar-with-navigation {
    @apply flex-col-0 h-full min-h-0 py-2;
  }

  .app-page-sidebar-with-navigation-header {
    @apply flex-col-0 items-start px-3 mb-8;

    @variant desktop {
      @apply items-center;
    }
  }

  .app-page-sidebar-with-navigation-scroll {
    @apply flex-1 min-h-0 px-3 py-1 overflow-y-auto overscroll-y-contain;
  }

  .app-page-sidebar-with-navigation-footer {
    @apply flex-col-0 px-3 pt-2;
  }

  [data-name="app-page-body"] {
    @apply flex-col-0 grow min-w-0 h-full overflow-hidden;
  }

  [data-name="app-page-content"] {
    @apply flex-col-0 grow min-h-0 overflow-y-auto overscroll-y-contain;
    scrollbar-gutter: stable;

    &[data-no-scrolling] {
      @apply overflow-hidden h-full;
    }
  }

  [data-name="app-page-header"] {
    @apply flex-row-2 items-center p-4 bg-background text-on-background;

    @variant desktop {
      @apply pl-6;
    }
  }

  .app-page-menu-button {
    @variant desktop {
      @apply hidden;
    }
  }

  [data-name="app-page-main-content"] {
    @apply flex-col-0 px-4;

    @variant desktop {
      @apply pl-6;
    }

    &[data-outer-no-scrolling] {
      @apply overflow-hidden grow;
    }
  }

  .app-page-main-spacer {
    @apply min-h-16;
  }

  .app-page-navigation-item-label {
    @apply flex-row-2 items-center w-full;

    &[data-active-page] {
      @apply text-primary;
    }
  }
}