@layer components { .c-component-list { margin-block: 0; padding-inline-start: var(--space-5); } .c-component-list--tags { list-style: none; padding-inline-start: 0; } .c-component-list--tags > li { padding: var(--space-1) var(--space-3); border: var(--wa-border-width) solid var(--wa-context-surface-border); border-radius: var(--wa-radius-control); } }

@layer components {
  .c-component-list--steps { padding-inline-start: 0; list-style: none; counter-reset: composition-step; }
  .c-component-list--steps > li { position: relative; counter-increment: composition-step; padding-block: var(--space-4); padding-inline-start: var(--space-8); border-block-start: var(--wa-border-width) solid var(--wa-context-surface-border); }
  .c-component-list--steps > li::before { content: counter(composition-step); position: absolute; inset-inline-start: 0; inset-block-start: var(--space-4); display: grid; place-items: center; inline-size: var(--space-6); block-size: var(--space-6); border-radius: 50%; background: var(--wa-color-accent-soft); color: var(--wa-color-text); font-family: var(--wa-font-numeric-family); font-weight: var(--wa-font-numeric-weight); }
}