/* assets/css/components/tick-list.css
 * @layer components — Tick List (editorial bulleted list)
 *
 * Replaces the default disc bullet with a rounded-square tile carrying
 * a white check icon. Used on policy / commitment / values lists where
 * each line is a deliberate statement. Single-column, left-aligned,
 * readable long-form.
 *
 * BEM:
 *   .tick-list                    — the <ul>
 *   .tick-list__item              — each <li>
 *   .tick-list__tick              — the rounded-square tile (with .icon-ui inside)
 *   .tick-list__text              — the statement
 *
 * Variants (--variant via modifier class):
 *   .tick-list--primary           — teal square + white tick (default, recommended)
 *   .tick-list--secondary         — copper square + white tick
 *   .tick-list--primary-tint      — mint-light square + teal tick
 *   .tick-list--secondary-tint    — peach-light square + copper tick
 *
 * All values come from tokens.css.
 */

@layer components {

  .tick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    color: var(--text-body);
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
  }

  /* Each item is a 2-col grid (tile + text). Align both to the first
     text baseline so the tile's vertical centre tracks the first line's
     optical centre across every viewport without a margin hack. */
  .tick-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-s);
    align-items: first baseline;
  }

  .tick-list__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-l);
    block-size: var(--space-l);
    border-radius: var(--radius-s);
    flex-shrink: 0;
  }

  /* The framework-sized icon-ui sits inside the tile; tile size dictates
     visual weight, icon size is fixed by the framework class. */
  .tick-list__tick .icon-ui {
    flex-shrink: 0;
  }

  .tick-list__text {
    min-inline-size: 0;
  }

  /* Variant — primary solid (default). Teal fill, white tick. */
  .tick-list--primary .tick-list__tick {
    background: var(--primary);
    color: var(--white);
  }

  /* Variant — secondary solid. Copper fill, white tick. */
  .tick-list--secondary .tick-list__tick {
    background: var(--secondary);
    color: var(--white);
  }

  /* Variant — primary tinted. Mint-light fill, teal tick. */
  .tick-list--primary-tint .tick-list__tick {
    background: var(--primary-ultra-light);
    color: var(--primary);
  }

  /* Variant — secondary tinted. Peach-light fill, copper tick. */
  .tick-list--secondary-tint .tick-list__tick {
    background: var(--secondary-ultra-light);
    color: var(--secondary);
  }
}