@layer components {
  [data-coco][data-component="placeholder"] {
    @apply p-4;

    &[data-boxed="true"] {
      @apply border border-dashed border-gray-400 bg-gray-50;
    }

    &[data-prose="true"] {
      .placeholder-content {
        @apply space-y-3;
      }
    }

    &[data-prose="false"] {
      @apply text-center;
    }

    &[data-size="full"] {
      @apply w-full h-full;

      .placeholder-inner {
        @apply flex items-center justify-center h-full w-full;
      }

      .placeholder-content {
        @apply m-auto;
      }
    }
  }
}