/**
 * Komponent: list-extend (Style listy z ikoną, tłem i zaokrągleniem)
 */

/* Wyłączenie domyślnych punktorów i reset marginesów */
.wp-block-list.has-custom-icon,
ul.has-custom-icon {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Pojedynczy punkt listy - tekst płynie naturalnie blokowo */
.wp-block-list.has-custom-icon > li,
ul.has-custom-icon > li {
    position: relative;
    list-style: none;
    padding-left: calc(var(--list-icon-box-size, var(--list-icon-size, 18px)) + var(--list-icon-gap, 12px));
    margin-bottom: 0.5rem;
    display: block;
}

/* Wariant 1: Sama ikona (bez dodatkowego tła) */
.wp-block-list.has-custom-icon:not(.has-custom-icon-bg) > li::before,
ul.has-custom-icon:not(.has-custom-icon-bg) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: var(--list-icon-size, 18px);
    height: var(--list-icon-size, 18px);
    background-color: var(--list-icon-color, currentColor);
    mask-image: var(--list-icon-mask);
    -webkit-mask-image: var(--list-icon-mask);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* Wariant 2: Ikona z tłem (badge / kółko) */
.wp-block-list.has-custom-icon-bg > li::before,
ul.has-custom-icon-bg > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: var(--list-icon-box-size, 24px);
    height: var(--list-icon-box-size, 24px);
    background-color: var(--list-icon-bg, transparent);
    border-radius: var(--list-icon-radius, 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Wewnętrzna ikona na tle */
.wp-block-list.has-custom-icon-bg > li::after,
ul.has-custom-icon-bg > li::after {
    content: "";
    position: absolute;
    left: calc((var(--list-icon-box-size, 24px) - var(--list-icon-size, 18px)) / 2);
    top: calc(0.15em + (var(--list-icon-box-size, 24px) - var(--list-icon-size, 18px)) / 2);
    width: var(--list-icon-size, 18px);
    height: var(--list-icon-size, 18px);
    background-color: var(--list-icon-color, currentColor);
    mask-image: var(--list-icon-mask);
    -webkit-mask-image: var(--list-icon-mask);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    pointer-events: none;
}