/**
 * 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;

        .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;
        }

    }

}