.ui-list-itemized-icons {
    --max-list-gap: 8px;
    --xxl-list-gap: 8px;
    --xl-list-gap: 8px;
    --lg-list-gap: 8px;
    --md-list-gap: 8px;
    --sm-list-gap: 8px;
    --xs-list-gap: 8px;

    --max-font-size: var(--typography-font-size-p);
    --xxl-font-size: var(--typography-font-size-p);
    --xl-font-size: var(--typography-font-size-p);
    --lg-font-size: var(--typography-font-size-p);
    --md-font-size: var(--typography-font-size-p);
    --sm-font-size: var(--typography-font-size-p);
    --xs-font-size: var(--typography-font-size-p);

    --max-font-weight: 600;
    --xxl-font-weight: 600;
    --xl-font-weight: 600;
    --lg-font-weight: 600;
    --md-font-weight: 600;
    --sm-font-weight: 600;
    --xs-font-weight: 600;

    --max-icon-size: 32px;
    --xxl-icon-size: 32px;
    --xl-icon-size: 32px;
    --lg-icon-size: 28px;
    --md-icon-size: 26px;
    --sm-icon-size: 24px;
    --xs-icon-size: 20px;

    --list-flex-direction: column;
    --list-gap: var(--max-list-gap);
    --item-align-items: start;
    --list-flex-wrap: nowrap;
    --list-icon: url('/assets/svg/arrow-right-GFL4Bmj.svg');
    --list-item-gap: 8px;
    --icon-size: var(--max-icon-size);
    --icon-color: var(--color-btm-orange);
    --icon-display: block;
    --font-size: var(--typography-font-size-p);
    /*--font-size: var(--max-font-size);*/
    --line-height: 1.5;
    --font-weight: var(--max-font-weight);
    --text-color: #fff;

    @media (width <= 1440px) {
        /*--xxl*/
        --list-gap: var(--xxl-list-gap);
        --font-size: var(--xxl-font-size);
        --font-weight: var(--xxl-font-weight);
        --icon-size: var(--xxl-icon-size);
    }

    @media (width <= 1200px) {
        /*--xl*/
        --list-gap: var(--xl-list-gap);
        --font-size: var(--xl-font-size);
        --font-weight: var(--xl-font-weight);
        --icon-size: var(--xl-icon-size);
    }

    @media (width <= 992px) {
        /*--lg*/
        --list-gap: var(--lg-list-gap);
        --font-size: var(--lg-font-size);
        --font-weight: var(--lg-font-weight);
        --icon-size: var(--lg-icon-size);
    }

    @media (width <= 768px) {
        /*--md*/
        --list-gap: var(--md-list-gap);
        --font-size: var(--md-font-size);
        --font-weight: var(--md-font-weight);
        --icon-size: var(--md-icon-size);
    }

    @media (width <= 576px) {
        /*--sm*/
        --list-gap: var(--sm-list-gap);
        --font-size: var(--sm-font-size);
        --font-weight: var(--sm-font-weight);
        --icon-size: var(--sm-icon-size);
    }

    @media (width <= 320px) {
        /*--xs*/
        --list-gap: var(--xs-list-gap);
        --font-size: var(--xs-font-size);
        --font-weight: var(--xs-font-weight);
        --icon-size: var(--xs-icon-size);
    }

    position: relative;
    list-style-type: none;
    display: flex;
    flex-direction: var(--list-flex-direction);
    flex-wrap: var(--list-flex-wrap);
    align-items: start;
    justify-content: start;
    gap: var(--list-gap);

    &.ui-list-icons-numeric {
        li:nth-child(1) { --list-icon: url('/assets/svg/numbers/one-R5mc54t.svg'); }
        li:nth-child(2) { --list-icon: url('/assets/svg/numbers/two-4Yc4QRk.svg'); }
        li:nth-child(3) { --list-icon: url('/assets/svg/numbers/three-gQY89HI.svg'); }
        li:nth-child(4) { --list-icon: url('/assets/svg/numbers/four-_n-hCjt.svg'); }
        li:nth-child(5) { --list-icon: url('/assets/svg/numbers/five-iLfaY9J.svg'); }
        li:nth-child(6) { --list-icon: url('/assets/svg/numbers/six-udKh_zH.svg'); }
        li:nth-child(7) { --list-icon: url('/assets/svg/numbers/seven-gH3ZIut.svg'); }
        li:nth-child(8) { --list-icon: url('/assets/svg/numbers/eight-GewbXw8.svg'); }
        li:nth-child(9) { --list-icon: url('/assets/svg/numbers/nine-2NfTgi_.svg'); }
    }

    &.ui-list-icons-checkmark {
        --list-icon: url('/assets/svg/checked-thick-oiWnFNx.svg');
    }

    &.ui-list-icons-links {
        --list-icon: url('/assets/svg/link-qunGgxI.svg');
    }

    &.ui-list-icons-error {
        --list-icon: url('/assets/svg/error-6ltwXpU.svg');
        --icon-color: var(--color-btm-dark-red);
    }

    li {
        display: flex;
        flex-direction: row;
        align-items: var(--item-align-items);
        justify-content: start;
        gap: var(--list-item-gap);
        font-size: var(--font-size);
        line-height: var(--line-height);
        font-weight: var(--font-weight);
        text-align: left;
        color: var(--text-color);

        &:before {
            --is-one: calc(1 - clamp(0, (var(--line-height) - 1) * 1000, 1));
            --icon-offset: calc((1 - var(--is-one)) * 0.5 * (var(--line-height) * var(--font-size) - var(--icon-size)));

            content: '';
            display: var(--icon-display);
            width: var(--icon-size);
            min-width: var(--icon-size);
            height: var(--icon-size);
            min-height: var(--icon-size);
            transform: translateY(var(--icon-offset));
            background-color: var(--icon-color);
            transition: all .3s linear;
            mask: var(--list-icon) no-repeat center;
        }

        &.dog { --list-icon: url('/assets/svg/animals/dog-zOEBkz-.svg'); }
        &.cat { --list-icon: url('/assets/svg/animals/cat-FH11-QH.svg'); }
        &.horse { --list-icon: url('/assets/svg/animals/horse-X2FnzCk.svg'); }
        &.sheep { --list-icon: url('/assets/svg/animals/sheep-TfyaPVG.svg'); }
        &.goat { --list-icon: url('/assets/svg/animals/goat-0yEh9j7.svg'); }
        &.cow { --list-icon: url('/assets/svg/animals/cow-GPeMzAG.svg'); }
        &.donkey { --list-icon: url('/assets/svg/animals/donkey-FSpd61d.svg'); }
        &.camel { --list-icon: url('/assets/svg/animals/camel-jvYythL.svg'); }

        em {
            display: contents;
        }

        strong {
            display: contents;
        }

        a {
            color: var(--color-btm-orange);
            font-size: inherit;
            line-height: inherit;
            text-decoration: none;
            transition: all .2s linear;

            &:hover {
                text-decoration: underline;
                color: var(--color-da-green);
            }
        }
    }
}