/*
 * Check-list · ersätter punktlistans markör med en check-ikon
 * Aktivera per lista i Bricks → Style → CSS classes → "check-list"
 *
 * Implementation:
 *   Ikonen ligger som mask-image, inte background-image. SVG:n är ritad med
 *   fill="currentColor", men currentColor resolvar inte i en extern bild —
 *   som background hade den blivit svart. Som mask målas formen istället av
 *   background-color, och färgen blir fritt styrbar via --cl-color.
 *
 *   Ikonen är inbakad som data-URI: ingen extra request, och listan slutar
 *   inte fungera om filen i uploads flyttas eller byter namn.
 *
 * OBS: ACSS har redan list--none och marker--*. De färgar den inbyggda
 * ::marker. Den här klassen tar bort markören helt, så marker--* har
 * ingen effekt tillsammans med check-list — använd --cl-color istället.
 */

.check-list {
  --cl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.545 6.73A5 5 0 0 1 6.73 4.545C7.8 4 9.2 4 12 4s4.2 0 5.27.545a5 5 0 0 1 2.185 2.185C20 7.8 20 9.2 20 12s0 4.2-.545 5.27a5 5 0 0 1-2.185 2.185C16.2 20 14.8 20 12 20s-4.2 0-5.27-.545a5 5 0 0 1-2.185-2.185C4 16.2 4 14.8 4 12s0-4.2.545-5.27m10.985 3.8a.75.75 0 1 0-1.06-1.06L11 12.94l-1.47-1.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0z'%3E%3C/path%3E%3C/svg%3E");
  --cl-color: var(--primary);  /* sätt till currentColor för att ärva textfärgen */
  --cl-size: 1.25em;           /* ikonstorlek, skalar med textstorleken */
  --cl-gap: .6em;              /* avstånd ikon → text */
  --cl-row-gap: .5em;          /* avstånd mellan listposter */

  /*
   * ACSS smart-spacing sätter listindraget via
   *   .smart-spacing.smart-spacing > :is(ul, ol) {
   *     padding-inline-start: var(--list-indent-spacing, …) }
   * Den dubblade klassen ger specificitet (0,2,1) och vinner över .check-list (0,1,0).
   * Istället för att bjuda över med !important sätter vi variabeln ACSS själv läser —
   * då räknar ACSS fram 0 åt oss. Variabeln ärvs, så det fungerar även när klassen
   * sitter på en wrapper. Nästlade listor styrs av --nested-list-indent-spacing och
   * påverkas inte.
   */
  --list-indent-spacing: 0;
}

/*
 * Klassen kan sitta antingen direkt på <ul>/<ol>, eller på en wrapper —
 * ett Bricks Text-element lägger CSS-klassen på sin div och har listan
 * inuti. Båda fallen träffas, och indraget nollställs med logiska
 * properties eftersom webbläsarens default är padding-inline-start: 40px.
 */
.check-list,
.check-list > :is(ul, ol) {
  list-style: none;
  padding-inline-start: 0;
  margin-inline-start: 0;
}

/*
 * Enbart direkta poster: en nästlad <ul> ligger inuti en <li> och träffas
 * därför inte — den behåller sitt eget utseende om den inte själv får
 * klassen.
 */
.check-list > li,
.check-list > :is(ul, ol) > li {
  display: grid;
  grid-template-columns: var(--cl-size) 1fr;
  gap: var(--cl-gap);
  align-items: start;
}

.check-list > li + li,
.check-list > :is(ul, ol) > li + li {
  margin-top: var(--cl-row-gap);
}

/*
 * Element-barn (nästlad lista, <strong>, <p> …) blir egna grid-items och
 * skulle annars auto-placeras i ikonkolumnen. Tvinga dem till textkolumnen.
 * Ren text i li:n blir ett anonymt item och hamnar redan rätt.
 */
.check-list > li > *,
.check-list > :is(ul, ol) > li > * {
  grid-column: 2;
}

.check-list > li::before,
.check-list > :is(ul, ol) > li::before {
  content: "";
  width: var(--cl-size);
  /*
   * Boxen görs lika hög som en radhöjd och ikonen centreras i den, så att
   * den optiskt hamnar mitt på första textraden oavsett radavstånd — och
   * stannar kvar där när texten radbryts. 1.5em är fallback för
   * webbläsare utan lh-enheten.
   */
  height: 1.5em;
  height: 1lh;
  background-color: var(--cl-color);
  -webkit-mask-image: var(--cl-icon);
          mask-image: var(--cl-icon);
  -webkit-mask-size: var(--cl-size) var(--cl-size);
          mask-size: var(--cl-size) var(--cl-size);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}