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

  .masked {
    // border: 2px solid #f00;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    visibility: hidden;

    &.fit {
      position: relative;
      width: 100%;
      height: 100%;
    }
    &.square {
      position: relative;
    }
  }

  .content {
    // border: 1px solid #0f0;
    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; }
  }

  svg {
    &.reveal {
      // border: 2px solid #f0f;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    &.square {
      visibility: hidden;
    }

  }
}