panels.css

@layer components {
  .panel {
    padding: 0.7895em;
    margin-bottom: 0.7895em;
    border-left: solid;
    @apply box-border clear-both border-gray-grey2;
  }
  .panel:first-child {
    @apply mt-0;
  }
  .panel:only-child,
  .panel:last-child {
    @apply mb-0;
  }

  .panel-border-wide {
    border-left-width: 10px;
  }
  /* Used to show the left edge of "toggled" content */
  .panel-border-narrow {
    border-left-width: 5px;
  }

  /* Panels within form groups
     By default, panels have 15px bottom margin
    - Remove the bottom padding as .form-group sets a bottom margin
    - Don't remove the bottom margin for all panels, assume they are often within stacked groups
  */
  .form-group .panel-border-narrow {
    @apply float-left w-full pb-0;
  }
  /* Note: This is incredibly fragile, and needs rebuilding. */

  /* The first panel in a group */
  .form-group .panel-border-narrow:first-child {
    @apply mt-4;
  }

  /* The last panel in a group */
  .form-group .panel-border-narrow:last-child {
    @apply my-0;
  }

  /* For inline panels */
  .inline .panel-border-narrow,
  .inline .panel-border-narrow:last-child {
    @apply mt-4 mb-0;
  }

  /* Template Formatting Guide styles */
  .panel-container {
    @apply flex w-full flex-col mb-12;
  }
  @variant lg {
    .panel-container {
      @apply flex-row;
    }
  }

  .panel-container > * {
    min-width: 200px;
    padding: 1em;
    @apply inline-block border-1 border-solid border-gray-lightgrey flex-1;
  }

  .panel-preview {
    @apply mt-6 ml-0;
  }
  @variant lg {
    .panel-preview {
      @apply mt-0 ml-6;
    }
  }

  .panel-container > .panel-input {
    border-left-width: 24px;
    @apply border-gray-grey2;
  }

  .panel-container h3 {
    @apply mt-0;
  }
  .panel-preview ul li,
  .panel-preview ol li {
    @apply my-2;
  }
}