/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-animatikon-borders {
    // border: 1px solid #f00;
    position: relative; // ustanawia kontekst dla absolutnego pozycjonowania
    // overflow-x: clip;

    .content {
        // border: 1px solid #00f;
        position: relative;
        display: block; // block zamiast flex - zgodnie z edytorem

        // Clearfix - zapobiega wypadaniu floatów poza kontener
        &::after {
            content: '';
            display: table;
            clear: both;
        }

        // Przestrzenne wyrównanie bloków (image itp.) - zgodnie z edytorem
        > .alignleft {
            clear: none;
            float: left;
            width: auto;
        }
        > .aligncenter {
            clear: none;
            float: none;
            display: flex;
            justify-content: center;
            width: auto;
        }
        > .alignright {
            clear: none;
            float: right;
            width: auto;
        }

        // Wyrównanie tekstu - standardowe klasy WP, działa dla wszystkich bloków
        > .has-text-align-left  { text-align: left; }
        > .has-text-align-center { text-align: center; }
        > .has-text-align-right { text-align: right; }

        .svgContainer {
            // border: 1px solid #3926e2;
            position: absolute;
            width: 100%;
            overflow-x: hidden;
            pointer-events: none; // aby nie blokować interakcji z zawartością

            &.top.inside {
                top: 0;
            }

            &.bottom.inside {
                bottom: 0;
                transform: scaleY(-1);
            }

            &.top.outside {
                bottom: 100%;
                transform: scaleY(-1);
            }

            &.bottom.outside {
                top: 100%;
            }

            &.left.inside {
                // border: 1px solid #f0f;
                width: 10px;
                transform: rotate(90deg) scaleY(-1);
                transform-origin: top left;
            }

            &.left.outside {
                // border: 1px solid #f00;
                width: 10px;
                transform: rotate(90deg);
                transform-origin: top left;
            }

            &.right.inside {
                // border: 1px solid #ff0;
                width: 10px;
                right: 0;
                transform: rotate(90deg) scaleX(-1);
                transform-origin: top right;
            }

            &.right.outside {
                // border: 1px solid #0f0;
                right: 0;
                width: 10px;
                transform: rotate(-90deg);
                transform-origin: top right;
            }

        }

        svg {
            // border: 1px solid #f00;
            position: relative;
            display: block;
            left: 50%;
            transform: translateX(-50%);
            visibility: hidden;

            // Poprawa jakości i wydajności animacji
            shape-rendering: geometricPrecision;
            will-change: d, contents;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

            // If width of SVG = 100%.
            &.hundredPercent {
                left: 0;
                transform: none;
            }

            &.flip-x {
                transform: translateX(-50%) scaleX(-1);
            }

            &.flip-x.hundredPercent {
                transform: scaleX(-1);
            }
        }

        path {
            pointer-events: none;
        }

        path:not(:first-child) {
            visibility: hidden;
        }

    }

}