{"version":3,"sources":["webpack://image-overlay-cues/./src/style.scss","webpack://image-overlay-cues/app.css"],"names":[],"mappings":";;;AAAA,sB,CAAA,I,CACI,0B,CAGJ,mB,CACI,iB,CACA,K,CACA,M,CAGJ,oF,CCIA,gCAAgC,6B,CDF5B,iB,CACA,8B,CACA,6C,CACA,4C,CACA,gD,CACA,iD,CACA,6C,CACA,6C,CACA,2C,CAEA,4F,CCIJ,gCAAgC,qC,CDHxB,6B,CACA,Y,CACA,kB,CACA,sB,CACA,gB,CACA,kD,CACA,mD,CACA,0D,CACA,iB,CACA,+C,CACA,mD,CACA,qD,CACA,iD,CACA,S,CACA,kD,CACA,2D,CAIR,8E,CCIA,uD,CDFI,iB,CAEA,gD,CAEA,6C,CACA,qF,CACA,gD,CACA,iD,CACA,sF,CACA,6C,CACA,2C,CAEA,wD,CACA,mD,CAEA,qD,CACA,0G,CAEA,4H,CAGA,+G,CCEJ,wF,CDDQ,sF,CACA,yH,CCIR,kG,CDHY,e,CAIR,iH,CCGJ,0F,CDFQ,2C,CAEA,2H,CCIR,oG,CDHY,0B,CACA,iB,CAIR,gH,CCGJ,yF,CDFQ,+C,CACA,uF,CACA,0H,CCKR,mG,CDJY,gB,CAMR,4G,CCEJ,qF,CDDQ,qF,CAGJ,+G,CCEJ,wF,CDDQ,0C,CAEA,yH,CCGR,kG,CDFY,0B,CAMJ,4J,CCAR,qI,CDCY,8B,CAIR,+G,CCDJ,wF,CDEQ,8C,CACA,wF,CAIJ,wF,CCFJ,iE,CDGQ,iB,CACA,mE,CACA,mD,CACA,qD,CACA,iD,CAIA,+G,CCHR,wF,CDKY,6G,CAEA,mH,CCHZ,4F,CDIgB,c,CACA,kC,CAAA,0B,CACA,2D,CACA,sD,CACA,kD,CACA,2D,CAKZ,mG,CCJJ,4E,CDOQ,6C,CAEA,6G,CAoBA,8G,CCzBR,sF,CAcA,uF,CDPY,+C,CAEA,iH,CCLZ,0F,CDMgB,+D,CACA,kE,CAGA,wE,CACA,yE,CAEA,sD,CACA,kD,CACA,2D,CAUJ,kH,CCXZ,2F,CDYgB,+D,CACA,kE,CAGA,wE,CACA,yE,CAEA,sD,CACA,kD,CACA,se","file":"app.css","sourcesContent":[".editor-styles-wrapper, body {\n    counter-reset: images-count;\n}\n\n.ioc-container-root {\n    position: absolute;\n    top:0;\n    left:0;\n}\n\n.editor-styles-wrapper .is-style-ioc--image--count:not(.ioc-has-custom-text-overlay),\n.is-style-ioc--image--count:not(.ioc-has-custom-text-overlay) {\n    position: relative;\n    counter-increment: images-count;\n    --image-overlay-cues--image-count--size: 1.2em;\n    --image-overlay-cues--image-count--top: 0.5em;\n    --image-overlay-cues--image-count--right: initial;\n    --image-overlay-cues--image-count--bottom: initial;\n    --image-overlay-cues--image-count--left: 0.5em;\n    --image-overlay-cues--image-count--text: black;\n    --image-overlay-cues--image-count--bg: white;\n\n    &::before {\n        content: counter(images-count);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        aspect-ratio: 1 / 1;\n        width: var(--image-overlay-cues--image-count--size);\n        height: var(--image-overlay-cues--image-count--size);\n        border-radius: var(--image-overlay-cues--image-count--size);\n        position: absolute;\n        top: var(--image-overlay-cues--image-count--top);\n        right: var(--image-overlay-cues--image-count--right);\n        bottom: var(--image-overlay-cues--image-count--bottom);\n        left: var(--image-overlay-cues--image-count--left);\n        z-index: 9;\n        color: var(--image-overlay-cues--image-count--text);\n        background-color: var(--image-overlay-cues--image-count--bg);\n    }\n}\n\n.editor-styles-wrapper .is-style-ioc--image--count.ioc-has-custom-text-overlay,\n.is-style-ioc--image--count.ioc-has-custom-text-overlay {\n    position: relative;\n\n    --image-overlay-cues--image-count--offset: 0.5rem;\n\n    --image-overlay-cues--image-count--size: 1.2em;\n    --image-overlay-cues--image-count--top: var(--image-overlay-cues--image-count--offset);\n    --image-overlay-cues--image-count--right: initial;\n    --image-overlay-cues--image-count--bottom: initial;\n    --image-overlay-cues--image-count--left: var(--image-overlay-cues--image-count--offset);\n    --image-overlay-cues--image-count--text: black;\n    --image-overlay-cues--image-count--bg: white;\n\n    --image-overlay-cues--image-count-text-border-radius: 4px;\n    --image-overlay-cues--image-count-text-padding: 10px;\n    \n    --image-overlay-cues--image-count-text-padding-x: 10px;\n    --image-overlay-cues--image-count-text-padding-y: calc(0.25 * var(--image-overlay-cues--image-count--size));\n    \n    --image-overlay-cues--image-count-text-line-height: calc(1em + (3.5 * var(--image-overlay-cues--image-count-text-padding-y)));\n\n    /** Adding horizontal positions **/\n    &.ioc-has-horizontal-position-left {\n        --image-overlay-cues--image-count--left: var(--image-overlay-cues--image-count--offset);\n        .ioc-text {\n            text-align: left;\n        }\n    }\n\n    &.ioc-has-horizontal-position-center {\n        --image-overlay-cues--image-count--left: 50%;\n\n        .ioc-text {\n            transform:translateX(-50%);\n            text-align: center;\n        }\n    }\n\n    &.ioc-has-horizontal-position-right {\n        --image-overlay-cues--image-count--left: initial;\n        --image-overlay-cues--image-count--right: var(--image-overlay-cues--image-count--offset);\n        .ioc-text {\n            text-align: right;\n        }\n    }\n\n\n    /** Adding vertical positions **/\n    &.ioc-has-vertical-position-top {\n        --image-overlay-cues--image-count--top: var(--image-overlay-cues--image-count--offset);\n    }\n\n    &.ioc-has-vertical-position-center {\n        --image-overlay-cues--image-count--top: 50%;\n        \n        .ioc-text {\n            transform:translateY(-50%);\n        }\n    }\n\n    /** To handle center case for both positions **/\n    &.ioc-has-vertical-position-center.ioc-has-horizontal-position-center {\n        .ioc-text {\n            transform:translate(-50%, -50%);\n        }\n    }\n\n    &.ioc-has-vertical-position-bottom {\n        --image-overlay-cues--image-count--top: initial;\n        --image-overlay-cues--image-count--bottom: var(--image-overlay-cues--image-count--offset);\n    }\n\n    /** Default setup, that will be same for every style **/\n    .ioc-text {\n        position: absolute;\n        line-height: var(--image-overlay-cues--image-count-text-line-height);\n        right: var(--image-overlay-cues--image-count--right);\n        bottom: var(--image-overlay-cues--image-count--bottom);\n        left: var(--image-overlay-cues--image-count--left);\n    }\n\n    &.ioc-text-style-default {\n        .ioc-text {\n\n            top: calc(var(--image-overlay-cues--image-count--top) + calc(var(--image-overlay-cues--image-count-text-padding) / 2));\n\n            div {\n                display: inline;\n                box-decoration-break: clone;\n                padding: var(--image-overlay-cues--image-count-text-padding);\n                font-size: var(--image-overlay-cues--image-count--size);\n                color: var(--image-overlay-cues--image-count--text);\n                background-color: var(--image-overlay-cues--image-count--bg);\n            }\n        }\n    }\n\n    &.ioc-text-style-badge {\n\n        // Removing offsets from the text for this particular style.\n        --image-overlay-cues--image-count--offset: 0px;\n\n        .ioc-text {\n\n            top: var(--image-overlay-cues--image-count--top);\n\n            div {\n                padding-top: var(--image-overlay-cues--image-count-text-padding);\n                padding-bottom: var(--image-overlay-cues--image-count-text-padding);\n\n                // So it has some large horizontal padding.\n                padding-left: calc(var(--image-overlay-cues--image-count-text-padding) * 3);\n                padding-right: calc(var(--image-overlay-cues--image-count-text-padding) * 3);\n\n                font-size: var(--image-overlay-cues--image-count--size);\n                color: var(--image-overlay-cues--image-count--text);\n                background-color: var(--image-overlay-cues--image-count--bg);\n            }\n        }\n    }\n\n    &.ioc-text-style-stroke {\n        .ioc-text {\n\n            top: var(--image-overlay-cues--image-count--top);\n\n            div {\n                padding-top: var(--image-overlay-cues--image-count-text-padding);\n                padding-bottom: var(--image-overlay-cues--image-count-text-padding);\n\n                // So it has some large horizontal padding.\n                padding-left: calc(var(--image-overlay-cues--image-count-text-padding) * 3);\n                padding-right: calc(var(--image-overlay-cues--image-count-text-padding) * 3);\n\n                font-size: var(--image-overlay-cues--image-count--size);\n                color: var(--image-overlay-cues--image-count--text);\n                text-shadow: \n                2px 2px 0 var(--image-overlay-cues--image-count--bg),\n                -2px -2px 0 var(--image-overlay-cues--image-count--bg),\n                2px -2px 0 var(--image-overlay-cues--image-count--bg),\n                -2px 2px 0 var(--image-overlay-cues--image-count--bg),\n                2px 2px 0 var(--image-overlay-cues--image-count--bg),\n                0 2px 0 var(--image-overlay-cues--image-count--bg),\n                2px 0 0 var(--image-overlay-cues--image-count--bg),\n                0 -2px 0 var(--image-overlay-cues--image-count--bg),\n                -2px 0 0 var(--image-overlay-cues--image-count--bg);\n            }\n        }\n    }\n\n}\n",null],"sourceRoot":""}