/******* Do not edit this file *******
Code Snippets Manager
Saved: Sep 04 2026 | 07:21:19 */
/* ─────────────────────────────────────────────────────────────────────
   Star bullet list

   Add the class `star-list` to a <ul> inside any Bricks Rich Text
   element to swap the default bullets for the brand star:

       <ul class="star-list">
         <li>Restored chewing ability, allowing you to enjoy your
             favourite foods without hesitation.</li>
         <li>Enhanced speech clarity and comfort.</li>
       </ul>

   The star is drawn with clip-path on a ::before, so it is a single
   painted box — no icon font, no <img>, nothing extra to download, and
   the colour is a plain background-color that the tokens below drive.

   Per-instance overrides. Set any of these on the <ul>, on a wrapper,
   or in a Bricks element's custom CSS:

       --star-list-size      star width / height     default 2rem
       --star-list-color     star fill               default teal-400
       --star-list-gap       star-to-text gap        default space-s
       --star-list-row-gap   gap between items       default space-sm

   Every token has a literal fallback so the list still renders if it is
   ever used somewhere the Bricks global variables are not emitted.
   ───────────────────────────────────────────────────────────────────── */

.star-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: var(--star-list-row-gap, var(--space-sm, 24px));
}

.star-list > li {
  display: flex;
  align-items: flex-start;
  column-gap: var(--star-list-gap, var(--space-s, 16px));
}

/* flex-basis rather than width, so the star never shrinks next to a
   long line of text. */
.star-list > li::before {
  content: "";
  flex: 0 0 var(--star-list-size, 2rem);
  block-size: var(--star-list-size, 2rem);
  background-color: var(--star-list-color, var(--clr-teal-400, #6ec1ce));
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

/* A nested list keeps the star but steps in, so a sub-point still reads
   as subordinate to its parent. */
.star-list .star-list {
  margin-block-start: var(--star-list-row-gap, var(--space-sm, 24px));
  padding-inline-start: calc(
    var(--star-list-size, 2rem) + var(--star-list-gap, var(--space-s, 16px))
  );
}
/* ─────────────────────────────────────────────────────────────────────
   White variant — for a list sitting on teal, orange or any dark panel.

       <ul class="star-list star-list--white"> … </ul>

   Only the star colour changes. The text colour comes from whatever the
   Bricks element sets, so set that to white on the element as usual —
   this class deliberately does not touch it, so the same modifier works
   whether the copy is white, near-white or a tint.

   For a one-off colour that is neither the default nor white, skip the
   modifier and set the variable directly on the element instead:
       --star-list-color: var(--clr-orange-500);
   ───────────────────────────────────────────────────────────────────── */
.star-list--white {
  --star-list-color: var(--clr-surface, #ffffff);
}