article {
    @apply h-full w-full flex flex-col;

    & header {
        @apply flex-none flex flex-row items-center justify-between text-lg p-2;
        @apply bg-gray-200;
        @apply dark:bg-gray-600 dark:text-white;

        & .icons,
        & .badges,
        & .tools {
            @apply flex-shrink flex items-center;
        }

        & h1 {
            @apply flex-grow truncate;
        }

        & .badges,
        & .tools > * {
            @apply ml-2;
        }

        & img,
        & svg,
        & .caret {
            @apply mr-1;

            max-width: 1.125rem;
            max-height: 1.125rem;
        }
    }

    & .body {
        @apply flex-grow overflow-auto p-2 xl:p-4;
    }
}