.wp-block-list {
    /* 1. Reset the main list container */
    &.is-style-tick {
        list-style: none; /* Remove default bullets */
        padding-left: 0;   /* Remove default indentation */
    }

    /* 2. Set up the list items */
    &.is-style-tick li {
        margin-bottom: 0.5em; /* Optional: Adds space between list items */
        padding-left: 1.8em;   /* Creates space for the icon and indents the text */
        position: relative;     /* Creates a positioning anchor for the icon */
    }

    /* 3. Create and position the icon */
    &.is-style-tick li::before {
        font-family: 'classvr_v3_icons';
        font-size: calc(100% + 4px);
        position: absolute;
        content: '\E002';     /* The tick icon */
        color: inherit;
        line-height: 1;
        left: 0;              /* Aligns the icon to the left edge of the list item */
    }

    /* =================================================================================== */
    &.is-style-large-number {
        counter-reset: list-item; /* Initialize the counter */
        padding-inline-start: 0;
        list-style: none;
        display: grid;
        gap: 16px;

        li {
            counter-increment: list-item; /* Increment the counter for each li */
            align-items: center; /* Vertically center the content */
            display: flex; /* Use flexbox for alignment */
            gap: 1em; /* Add some space between the number and the content */

            /* Style the custom "marker" using ::before */
            &::before {
                font-size: var(--wp--preset--font-size--heading-three);
                font-family: var(--wp--preset--font-family--cabin);
                content: counter(list-item);
                justify-content: flex-start;
                min-width: 0.6em;
                font-weight: 700;
                flex-shrink: 0; /* Prevent the number from shrinking */
                display: flex;
            }

            &:nth-child(n+10) {
                &::before {
                    min-width: 1.2em;
                }
            }
        }
    }

    /* =================================================================================== */
    &.is-style-centered-circle-number {
        padding-inline-start: 0;
        text-align: center;
        flex-flow: column;
        list-style: none;
        display: flex;
        gap: 1em;

        li {
            counter-increment: list-item;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            display: flex;
            gap: 1em;

            &::before {
                font-family: var(--wp--preset--font-family--cabin);
                font-size: var(--wp--preset--font-size--medium);
                font-weight: 700;

                content: counter(list-item);
                background-color: white;
                align-content: center;
                border-radius: 50%;
                aspect-ratio: 1;
                display: block;
                width: 48px;
            }
        }
    }
}