{#if groups.length > 0} {#each groups as groupName} (currentGroup = groupName)} /> {/each} (currentGroup = "custom")} show={currentGroup === "custom"} thin >

onCustomStyleChanged(event.detail)}
              placeholder="Enter some CSS..."
            />
          </div>
        </DetailSummary>
        <Button secondary wide on:click={onResetStyles}>Reset Styles</Button>
      {:else}
        <div class="no-design">
          This component doesn't have any design properties.
        </div>
      {/if}
    </div>
  </div>
</div>

.positioned-wrapper {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
  }

.property-groups {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    margin: 0 -20px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--spacing-m);
  }

.no-design {
    font-size: var(--font-size-xs);
    color: var(--grey-5);
  }

.custom-styles :global(textarea) {
    font-family: monospace;
    min-height: 120px;
    font-size: var(--font-size-xs);
  }
</style>