/**
 * IconListItem.css — port de `BulletContainer` / `BulletText` de
 * `mx-cms/src/components/IconList/styles.ts` + los `Box` inline del index.
 *
 * `BulletContainer`: display flex, align-items center, margin-bottom según el
 * `size` de la lista (`bulletMargin`). La sección pasa `size="md"` → 24px.
 * `BulletText`: display block, margin-left 14px.
 * El `Box` que envuelve título + texto: flex column, gap 4px.
 *
 * Tipografía (tema `standard`):
 *   body.lg = 18px · ls xs 0.3 · lh lg 26px
 *   regular 400 · bold 700
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. Sin esto, Blink usa subpixel
 * smoothing y el mismo texto en 400 se ve más pesado que en el sitio actual. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-list-item {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: flex;
  align-items: center;
  /* `bulletMargin` del legacy, que depende del `size` que pasa cada sección:
     `IconList` usa `md` (24px) y `HowTo` usa `sm` (16px). El valor lo setea el
     padre en `--bullet-margin`; 24px queda como default para no cambiar lo que ya
     estaba. */
  /* margin-bottom: var(--bullet-margin, 24px); */

  /* Tamaños nombrados del DS. x_small es el default de esta sección. */
  .icon {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
  }

  &[data-size='small'] .icon {
    width: 32px;
    height: 32px;
  }

  &[data-size='medium'] .icon {
    width: 40px;
    height: 40px;
  }

  &[data-size='large'] .icon {
    width: 48px;
    height: 48px;
  }

  &[data-size='x_large'] .icon {
    width: 64px;
    height: 64px;
  }

  /* xx_large no es un tamaño del DS: se agregó a pedido, para logos e iconos que
     necesitan más presencia que los 64px de x_large. */
  &[data-size='xx_large'] .icon {
    width: 80px;
    height: 80px;
  }

  /* Box display="flex" flexDirection="column" gap="4px" */
  .content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  /* Typography variant="bodyLgBold" marginLeft="14px" */
  .title {
    margin: 0 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 26px;
  }

  /* BulletText: display block, margin-left 14px.
     El peso lo decide el ítem: con título va regular, sin título va bold —
     replica lo que el legacy resolvía a nivel sección con
     `otherTypographyVariant`. */
  /* ⚠️ El peso NO es universal: la regla "sin título va bold" viene de solo DOS
     secciones del legacy. `SimpleTitleTextListCTA` (= `TextListCta`) y
     `SimpleContentBigIconList` (= `ContentCtaList`) pasan
     `otherTypographyVariant={hasIconTitle ? 'bodyLgRegular' : 'bodyLgBold'}` al
     `IconList`; todas las demás secciones caen en `typographyVariant[size]`, que es
     **siempre** una variante `*Regular`.

     Como este ítem es un hijo compartido, el peso sale de `--bullet-weight` y el
     default reproduce la regla de esas dos. Una sección que en el legacy va siempre
     regular —`HowTo`, por ejemplo— setea `--bullet-weight: 400` en su contenedor de
     slot y gana en los dos casos. Las custom properties cruzan el shadow root por el
     árbol aplanado, igual que `--card-*` y `--bullet-margin`. */
  .text {
    display: block;
    margin: 0 0 0 14px;
    font-size: 18px;
    letter-spacing: 0.3px;
    line-height: 26px;
    font-weight: var(--bullet-weight, 700);

    &[data-weight='regular'] {
      font-weight: var(--bullet-weight, 400);
    }
  }

  /* El wrapper del texto con formato. Solo lleva la posición: la tipografía del
     contenido proyectado NO se puede estilar desde acá —queda en el light DOM—
     y sale de ./richText.js, una hoja a nivel documento. */
  .text-rich {
    display: block;
    margin: 0 0 0 14px;
    min-width: 0;
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.icon-list-item,
.icon-list-item *,
.icon-list-item *::before,
.icon-list-item *::after {
  box-sizing: border-box;
}