/**
 * Do/Don't and Pro/Con list patterns
 *
 * Usage:
 *   <ul data-list="do-dont">
 *     <li data-do>Use the full logo on light backgrounds.</li>
 *     <li data-dont>Don't stretch or rotate the logo.</li>
 *   </ul>
 *
 *   <ul data-list="pro-con">
 *     <li data-pro>Fast initial load time.</li>
 *     <li data-con>Requires JavaScript for interactivity.</li>
 *   </ul>
 */

[data-list="do-dont"],
[data-list="pro-con"] {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--size-s, 0.5rem);
}

/* Do / Pro items */
[data-list] > [data-do],
[data-list] > [data-pro] {
  padding: var(--size-s, 0.5rem) var(--size-m, 1rem);
  border-inline-start: 4px solid var(--color-success, oklch(55% 0.2 145));
  background: var(--color-success-subtle, oklch(95% 0.03 145));
  border-radius: var(--radius-s, 0.25rem);
}

/* Don't / Con items */
[data-list] > [data-dont],
[data-list] > [data-con] {
  padding: var(--size-s, 0.5rem) var(--size-m, 1rem);
  border-inline-start: 4px solid var(--color-error, oklch(55% 0.22 25));
  background: var(--color-error-subtle, oklch(95% 0.03 25));
  border-radius: var(--radius-s, 0.25rem);
}

/* Labels via ::before */
[data-list="do-dont"] > [data-do]::before {
  content: "Do";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-success, oklch(45% 0.2 145));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-list="do-dont"] > [data-dont]::before {
  content: "Don\2019t";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error, oklch(45% 0.22 25));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-list="pro-con"] > [data-pro]::before {
  content: "Pro";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-success, oklch(45% 0.2 145));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-list="pro-con"] > [data-con]::before {
  content: "Con";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error, oklch(45% 0.22 25));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}