@layer sfx.components {  :is(ul.list--icon, .has-list-icons) {
--sfx-list-gutter:         var(--list-gutter, var(--space-s, 1rem));
--sfx-list-indent:         var(--list-indent, 0);
--sfx-list-gap:            var(--list-gap, var(--space-2xs, 0.5rem));
--sfx-list-item-gutter:    var(--list-item-gutter, var(--article-gutter-xs, var(--space-2xs, 0.5rem)));
--sfx-list-icon-gap:       var(--list-icon-gap, var(--space-2xs, 0.5rem));
--sfx-list-icon-size:      var(--list-icon-size, 1em);
--sfx-list-icon-offset:    var(--list-icon-offset, 0);
--sfx-list-icon-display:   var(--list-icon-display, block);
--sfx-list-icon-url:       var(--list-icon-url, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E"));
--sfx-list-icon-color:     var(--list-icon-color, var(--secondary, currentColor));
--sfx-list-icon-bg-offset: var(--list-icon-bg-offset, 0);
--sfx-list-icon-bg-size-pad: var(--list-icon-bg-size-pad, 8px);
--sfx-list-icon-bg-radius: var(--list-icon-bg-radius, var(--radius-full, 9999px));
--sfx-list-icon-bg-color:  var(--list-icon-bg-color, var(--tertiary-l-4, transparent));
} :is(ul.list--icon, .has-list-icons ul) {
list-style: none;
padding: 0;
margin-block: var(--sfx-list-gutter);
margin-inline-start: var(--sfx-list-indent);
display: flex;
flex-direction: column;
gap: var(--sfx-list-gap);
}
:is(ul.list--icon, .has-list-icons ul):first-child {
margin-block-start: 0;
}
:is(ul.list--icon, .has-list-icons ul):last-child {
margin-block-end: 0;
}
:is(ul.list--icon, .has-list-icons ul) li + li {
margin-block-start: var(--sfx-list-item-gutter);
}
:is(ul.list--icon, .has-list-icons ul) li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sfx-list-icon-gap);
margin-block-start: 0;
&::before {
content: '';
display: var(--sfx-list-icon-display);
width: var(--sfx-list-icon-size);
height: var(--sfx-list-icon-size);
background-color: var(--sfx-list-icon-color);
-webkit-mask-image: var(--sfx-list-icon-url);
mask-image: var(--sfx-list-icon-url);
mask-size: cover;
translate: var(--sfx-list-icon-offset);
z-index: 1;
}
&::after {
content: '';
position: absolute;
z-index: 0;
width: calc(var(--sfx-list-icon-size) + var(--sfx-list-icon-bg-size-pad));
height: calc(var(--sfx-list-icon-size) + var(--sfx-list-icon-bg-size-pad));
background-color: var(--sfx-list-icon-bg-color);
translate: var(--sfx-list-icon-bg-offset);
border-radius: var(--sfx-list-icon-bg-radius);
}
} :is(ul.list--icon, .has-list-icons).is-check {
--sfx-list-icon-url:       var(--list-check-icon-url, var(--list-icon-url, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E")));
--sfx-list-icon-color:     var(--list-check-icon-color, var(--list-icon-color, var(--secondary)));
--sfx-list-icon-offset:    var(--list-check-icon-offset, var(--list-icon-offset, 0 .5ex));
--sfx-list-icon-size:      var(--list-check-icon-size, var(--list-icon-size, 1em));
--sfx-list-icon-gap:       var(--list-check-icon-icon-gap, var(--list-icon-gap, 15px));
--sfx-list-icon-display:   var(--list-check-icon-display, var(--list-icon-display, flex));
--sfx-list-indent:         var(--list-check-icon-indent, var(--list-indent, .5em));
--sfx-list-gap:            var(--list-check-icon-gap, var(--list-gap, var(--space-2xs, 0.5rem)));
--sfx-list-icon-bg-offset: var(--list-check-icon-bg-offset, var(--list-icon-bg-offset, -.4ex 0));
--sfx-list-icon-bg-color:  var(--list-check-icon-bg-color, var(--list-icon-bg-color, var(--tertiary-l-4)));
}
.card[class*="bg-secondary"] :is(ul.list--icon, .has-list-icons).is-check {
--sfx-list-icon-color:    var(--list-check-icon-color, var(--secondary));
--sfx-list-icon-bg-color: var(--list-check-icon-bg-color-alt, var(--secondary-10));
}
}