@layer components {
  [data-coco][data-component="panel"] {
    @apply contents;

    .panel-content {
      @apply contents;
    }

    /* Only style Coco panels that are not rendered inside legacy panel components */
    &:not([data-component="panel"] [data-component="panel"]) {
      @apply block bg-content-light-1 border border-coco-gray-300 shadow-md rounded-xl;

      .panel-content {
        @apply block;
        padding: max(min(5%, 2rem), 1rem);
      }
    }
  }
}