@layer components {
  [data-coco][data-component="page-layout"] {
    .page-body {
      @apply px-app w-full;
    }

    .page-controls {
      @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between pointer-events-none;
      left: var(--sidebar-nav-width, 0);

      > * {
        @apply pointer-events-auto;
      }

      .page-control-next {
        @apply ml-auto;
      }
    }

    &[data-width="constrained"] {
      .page-body-content {
        @apply max-w-screen-2xl mx-auto;
      }
    }
  }
}