/**
 * list.css
 *
 * A flexible and styleable list component.
 * ------------------------------------------------------------------------------
 * @feature {CSS Nesting} - For organized styling of items and markers.
 * @feature {::marker} - For direct styling of list item markers.
 * @feature {attr()} - For custom icon URLs and colors via CSS masks.
 */

:is(list, [data-list], .list) {
    --b-p: attr(padding type(*), 0);
    --b-m: attr(margin type(*), 0);
    display: flex;
    flex-direction: column;
    gap: attr(gap type(*), var(--l-gap, 0.5rem));
    padding-block: var(--b-p);
    padding-inline-end: var(--b-p);
    padding-inline-start: attr(indent type(*), max(var(--b-p), 1.5rem));
    list-style-position: outside;
    margin: var(--b-m);
    /* Style for inline lists */
    &[inline] {
      flex-direction: row;
      flex-wrap: wrap;
      padding-inline-start: 0;
      list-style: none;
    }

    & > :is(list-item, [data-list-item], .list-item) {
      display: list-item;
      position: relative;

      /* Style the native list item marker */
      &::marker {
        color: attr(marker-color type(*), var(--theme-primary));
        content: '• ';
      }

      &[type]::marker { content: attr(type) ' '; }

      /* Support for custom icons using modern CSS masks */
      &[icon] {
        list-style: none;
        padding-inline-start: calc(attr(icon-size type(*), 1.2em) + 0.5rem);

        &::before {
          content: '';
          position: absolute;
          inset-inline-start: 0; /* Logical property */
          top: 0.15em;
          width: attr(icon-size type(*), 1.2em);
          height: attr(icon-size type(*), 1.2em);
          background-color: attr(icon-color type(*), var(--theme-primary));
          mask-image: attr(icon type(<url>), none);
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
        }
      }
    }

    & > :is(list-divider, [data-list-divider], .list-divider) {
      block-size: var(--list-divider-size, var(--divider-size, 1px));
      background-color: var(--list-divider-color, var(--divider-color, var(--divider-color-subtle, var(--outline-subtle))));
      margin-block: attr(gap type(*), 0.5rem); /* Logical property */
      border: 0;
    }
}