/** TS Design System: recommended Elementor Icon List component. */

/* Only documented classes activate the component; there is no open il-* match. */
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) {
  --tsds-il-flow: var(--flow-m);
  --tsds-il-default-icon-gap: var(--ui-gap-s);
  --tsds-il-line-height: 1.4;
}

/* The full current flow scale; M remains the implicit default. */
.elementor .elementor-widget-icon-list.il-0 { --tsds-il-flow: var(--flow-0); }
.elementor .elementor-widget-icon-list.il-xxxs { --tsds-il-flow: var(--flow-xxxs); }
.elementor .elementor-widget-icon-list.il-xxs { --tsds-il-flow: var(--flow-xxs); }
.elementor .elementor-widget-icon-list.il-xs { --tsds-il-flow: var(--flow-xs); }
.elementor .elementor-widget-icon-list.il-s { --tsds-il-flow: var(--flow-s); }
.elementor .elementor-widget-icon-list.il-m { --tsds-il-flow: var(--flow-m); }
.elementor .elementor-widget-icon-list.il-l { --tsds-il-flow: var(--flow-l); }
.elementor .elementor-widget-icon-list.il-xl { --tsds-il-flow: var(--flow-xl); }
.elementor .elementor-widget-icon-list.il-xxl { --tsds-il-flow: var(--flow-xxl); }
.elementor .elementor-widget-icon-list.il-xxxl { --tsds-il-flow: var(--flow-xxxl); }

.elementor .elementor-widget-icon-list.il-tight { --tsds-il-line-height: 1.25; }

/*
 * ig-* remains a generic utility. Elementor owns the flex item that carries
 * the actual Icon List gap, so bridge only that property when ig-* is active
 * without activating any Icon List component defaults.
 */
.elementor .elementor-widget-icon-list:is(
  .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl
) .elementor-icon-list-item,
.elementor .elementor-widget-icon-list:is(
  .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl
) .elementor-icon-list-item > a {
  column-gap: var(--tsds-icon-gap) !important;
}

.elementor .elementor-widget-icon-list:is(
  .ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl
) .elementor-icon-list-icon {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Reset only the list owned by the activated widget. */
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) > .elementor-widget-container > .elementor-icon-list-items,
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) > .elementor-icon-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Inline lists and final items begin without a vertical component margin. */
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) .elementor-icon-list-item {
  margin-block-end: 0;
}

/* Standard vertical rhythm uses exactly one flow value between items. */
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted
):not(.elementor-icon-list--layout-inline) .elementor-icon-list-item:not(:last-child) {
  margin-block-end: var(--tsds-il-flow);
}

/*
 * Gap works for unlinked items and for Elementor's linked <a> structure.
 * The icon's inline margin/padding is neutralized to prevent double spacing.
 */
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) .elementor-icon-list-item,
.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) .elementor-icon-list-item > a {
  column-gap: var(--tsds-icon-gap, var(--tsds-il-legacy-icon-gap, var(--tsds-il-default-icon-gap))) !important;
}

.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) .elementor-icon-list-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.elementor .elementor-widget-icon-list:is(
  .il-0, .il-xxxs, .il-xxs, .il-xs, .il-s, .il-m, .il-l, .il-xl, .il-xxl, .il-xxxl,
  .il-tight, .il-muted, .il-sep
) .elementor-icon-list-text {
  line-height: var(--tsds-il-line-height) !important;
  color: var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417)));
}

/* Muted is intentionally not important so Elementor link hover can win. */
.elementor .elementor-widget-icon-list.il-muted .elementor-icon-list-text {
  color: var(
    --ts-color-muted,
    var(
      --c-muted,
      color-mix(
        in srgb,
        var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))) 72%,
        transparent
      )
    )
  );
}

/* Split one flow value around one separator; inline lists are excluded. */
.elementor .elementor-widget-icon-list.il-sep:not(.elementor-icon-list--layout-inline) .elementor-icon-list-item:not(:last-child) {
  margin-block-end: calc(var(--tsds-il-flow) / 2);
  padding-block-end: calc(var(--tsds-il-flow) / 2);
  border-bottom: 1px solid var(
    --ts-color-border,
    var(
      --c-border,
      color-mix(
        in srgb,
        var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417))) 10%,
        transparent
      )
    )
  );
}

/* il-sep owns the single line and suppresses Elementor's optional divider. */
.elementor .elementor-widget-icon-list.il-sep:not(.elementor-icon-list--layout-inline) .elementor-icon-list-item::after {
  content: none !important;
  display: none !important;
}