/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

 // create a key frame animation for a border echo blink effect
@keyframes blink {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5), 0 0 0 3px rgba(255, 255 , 0, 0.5) ;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}


.wp-block-wp-bannerize-block {
  border: 1px dashed #aaa;
  position: relative;
  display: grid;
  justify-items: center;

  .wp-bannerize-edit-container {
    position: relative;

    .wp-bannerize-edit-banner-info {
      position: absolute;
      top: 4px;
      left: 4px;
      border-radius: 256px;
      width: 18px;
      height: 18px;
      color: #fff;
      background-color: #f90;
      font-size: 18px;
      line-height: .95;
      text-align: center;
      cursor: help;
      animation: blink 1s infinite;

  
    }
  }
}

.wp-bannerize-popover-info {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
  padding: 2px 4px;
}