.editor-styles-wrapper, body {
    counter-reset: images-count;
}

.ioc-container-root {
    position: absolute;
    top:0;
    left:0;
}

.editor-styles-wrapper .is-style-ioc--image--count:not(.ioc-has-custom-text-overlay),
.is-style-ioc--image--count:not(.ioc-has-custom-text-overlay) {
    position: relative;
    counter-increment: images-count;
    --image-overlay-cues--image-count--size: 1.2em;
    --image-overlay-cues--image-count--top: 0.5em;
    --image-overlay-cues--image-count--right: initial;
    --image-overlay-cues--image-count--bottom: initial;
    --image-overlay-cues--image-count--left: 0.5em;
    --image-overlay-cues--image-count--text: black;
    --image-overlay-cues--image-count--bg: white;

    &::before {
        content: counter(images-count);
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        width: var(--image-overlay-cues--image-count--size);
        height: var(--image-overlay-cues--image-count--size);
        border-radius: var(--image-overlay-cues--image-count--size);
        position: absolute;
        top: var(--image-overlay-cues--image-count--top);
        right: var(--image-overlay-cues--image-count--right);
        bottom: var(--image-overlay-cues--image-count--bottom);
        left: var(--image-overlay-cues--image-count--left);
        z-index: 9;
        color: var(--image-overlay-cues--image-count--text);
        background-color: var(--image-overlay-cues--image-count--bg);
    }
}

.editor-styles-wrapper .is-style-ioc--image--count.ioc-has-custom-text-overlay,
.is-style-ioc--image--count.ioc-has-custom-text-overlay {
    position: relative;

    --image-overlay-cues--image-count--offset: 0.5rem;

    --image-overlay-cues--image-count--size: 1.2em;
    --image-overlay-cues--image-count--top: var(--image-overlay-cues--image-count--offset);
    --image-overlay-cues--image-count--right: initial;
    --image-overlay-cues--image-count--bottom: initial;
    --image-overlay-cues--image-count--left: var(--image-overlay-cues--image-count--offset);
    --image-overlay-cues--image-count--text: black;
    --image-overlay-cues--image-count--bg: white;

    --image-overlay-cues--image-count-text-border-radius: 4px;
    --image-overlay-cues--image-count-text-padding: 10px;
    
    --image-overlay-cues--image-count-text-padding-x: 10px;
    --image-overlay-cues--image-count-text-padding-y: calc(0.25 * var(--image-overlay-cues--image-count--size));
    
    --image-overlay-cues--image-count-text-line-height: calc(1em + (3.5 * var(--image-overlay-cues--image-count-text-padding-y)));

    /** Adding horizontal positions **/
    &.ioc-has-horizontal-position-left {
        --image-overlay-cues--image-count--left: var(--image-overlay-cues--image-count--offset);
        .ioc-text {
            text-align: left;
        }
    }

    &.ioc-has-horizontal-position-center {
        --image-overlay-cues--image-count--left: 50%;

        .ioc-text {
            transform:translateX(-50%);
            text-align: center;
        }
    }

    &.ioc-has-horizontal-position-right {
        --image-overlay-cues--image-count--left: initial;
        --image-overlay-cues--image-count--right: var(--image-overlay-cues--image-count--offset);
        .ioc-text {
            text-align: right;
        }
    }


    /** Adding vertical positions **/
    &.ioc-has-vertical-position-top {
        --image-overlay-cues--image-count--top: var(--image-overlay-cues--image-count--offset);
    }

    &.ioc-has-vertical-position-center {
        --image-overlay-cues--image-count--top: 50%;
        
        .ioc-text {
            transform:translateY(-50%);
        }
    }

    /** To handle center case for both positions **/
    &.ioc-has-vertical-position-center.ioc-has-horizontal-position-center {
        .ioc-text {
            transform:translate(-50%, -50%);
        }
    }

    &.ioc-has-vertical-position-bottom {
        --image-overlay-cues--image-count--top: initial;
        --image-overlay-cues--image-count--bottom: var(--image-overlay-cues--image-count--offset);
    }

    /** Default setup, that will be same for every style **/
    .ioc-text {
        position: absolute;
        line-height: var(--image-overlay-cues--image-count-text-line-height);
        right: var(--image-overlay-cues--image-count--right);
        bottom: var(--image-overlay-cues--image-count--bottom);
        left: var(--image-overlay-cues--image-count--left);
    }

    &.ioc-text-style-default {
        .ioc-text {

            top: calc(var(--image-overlay-cues--image-count--top) + calc(var(--image-overlay-cues--image-count-text-padding) / 2));

            div {
                display: inline;
                box-decoration-break: clone;
                padding: var(--image-overlay-cues--image-count-text-padding);
                font-size: var(--image-overlay-cues--image-count--size);
                color: var(--image-overlay-cues--image-count--text);
                background-color: var(--image-overlay-cues--image-count--bg);
            }
        }
    }

    &.ioc-text-style-badge {

        // Removing offsets from the text for this particular style.
        --image-overlay-cues--image-count--offset: 0px;

        .ioc-text {

            top: var(--image-overlay-cues--image-count--top);

            div {
                padding-top: var(--image-overlay-cues--image-count-text-padding);
                padding-bottom: var(--image-overlay-cues--image-count-text-padding);

                // So it has some large horizontal padding.
                padding-left: calc(var(--image-overlay-cues--image-count-text-padding) * 3);
                padding-right: calc(var(--image-overlay-cues--image-count-text-padding) * 3);

                font-size: var(--image-overlay-cues--image-count--size);
                color: var(--image-overlay-cues--image-count--text);
                background-color: var(--image-overlay-cues--image-count--bg);
            }
        }
    }

    &.ioc-text-style-stroke {
        .ioc-text {

            top: var(--image-overlay-cues--image-count--top);

            div {
                padding-top: var(--image-overlay-cues--image-count-text-padding);
                padding-bottom: var(--image-overlay-cues--image-count-text-padding);

                // So it has some large horizontal padding.
                padding-left: calc(var(--image-overlay-cues--image-count-text-padding) * 3);
                padding-right: calc(var(--image-overlay-cues--image-count-text-padding) * 3);

                font-size: var(--image-overlay-cues--image-count--size);
                color: var(--image-overlay-cues--image-count--text);
                text-shadow: 
                2px 2px 0 var(--image-overlay-cues--image-count--bg),
                -2px -2px 0 var(--image-overlay-cues--image-count--bg),
                2px -2px 0 var(--image-overlay-cues--image-count--bg),
                -2px 2px 0 var(--image-overlay-cues--image-count--bg),
                2px 2px 0 var(--image-overlay-cues--image-count--bg),
                0 2px 0 var(--image-overlay-cues--image-count--bg),
                2px 0 0 var(--image-overlay-cues--image-count--bg),
                0 -2px 0 var(--image-overlay-cues--image-count--bg),
                -2px 0 0 var(--image-overlay-cues--image-count--bg);
            }
        }
    }

}