.documents {
  @apply flex flex-col py-5 px-2 gap-3 h-full w-full max-w-7xl m-auto;
  header {
    @apply flex flex-col gap-2;
    p {
      @apply mt-1 text-gray-500;
    }
  }
  dl {
    @apply flex gap-2;
    dt {
      @apply font-semibold;
    }
  }
  &> section.document {
    @apply grid gap-3 overflow-hidden;
    grid-template-areas: "data document";
    grid-template-columns: 50% 50%;
    .data {
      @apply flex flex-col gap-3 overflow-scroll;
      grid-area: data;
      article {
        @apply flex flex-col border border-gray-200 rounded-md;
        header {
          @apply flex flex-row pt-3 pb-2 px-3 bg-gray-200;
          h3 {
            @apply flex-1;
          }
          .icon.toggle {
            @apply cursor-pointer;
          }
          &:has(~ summary.hidden) .icon.toggle {
            @apply rotate-90;
          }
        }
        dl {
          @apply px-3 pb-3 bg-gray-200;
        }
        summary {
          @apply px-3 pt-3;
        }
        aside {
          @apply p-3;
          span {
            @apply cursor-pointer text-emerald-700;
          }
        }
      }
    }
    .document {
      @apply overflow-hidden flex flex-col;
      grid-area: document;
    }
  }
}