/**
 * 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-bgshapes {
	// border: 1px solid rgb(0, 112, 240);
	position: relative;
    overflow: clip;

    &.no-overflow-x {
        overflow-x: visible;
    }
    &.no-overflow-y {
        overflow-y: visible;
    }

    .content {
        // border: 1px solid rgb(240, 0, 0);
        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; }

    }

    // For shapes with ratio 1/1
    .shape-svg {
        // border: 1px solid #0bf13d;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform-origin: center center;
        transform: translate(-50%, -50%);
        aspect-ratio: 1 / 1;
        box-sizing: border-box;
        visibility: hidden;

        &.landscape {
            width: 100%;
            height: auto;
        }
        &.portrait {
            width: auto;
            height: 100%;
        }
    }

    // For shapes fithed to the container (parent)
    .shape-svg-fitted {
        // border: 1px solid #f1ed0b;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform-origin: center center;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        visibility: hidden;
    }

}