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

.wp-block-overlapping-images-block-overlapping-images {

  .overlapping-imgs-placeholder{
    width: 100%;
    height: 100%;

    .components-placeholder__instructions{
      display: block;
    }
  }

}

.overlapping-imgs-image-one-wrap,
.overlapping-imgs-image-two-wrap,
.overlapping-imgs-card{
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  border: 2px solid transparent;
  margin: -2px;
}

.overlapping-imgs-card{
  min-height: 150px;
  position: relative;
}

.wp-block-overlapping-images-block-overlapping-images .block-editor-rich-text__editable{
  border: 1px solid transparent;
  padding: 0 2px;
}

.wp-block-overlapping-images-block-overlapping-images .block-editor-rich-text__editable:focus{
  border: 1px dotted #333;
}

.wp-block-overlapping-images-block-overlapping-images.is-selected .overlapping-imgs-image-one-wrap:not(.el-selected),
.wp-block-overlapping-images-block-overlapping-images.is-selected .overlapping-imgs-image-two-wrap:not(.el-selected),
.wp-block-overlapping-images-block-overlapping-images.is-selected .overlapping-imgs-card{
  &:hover{
    border: 2px solid rgb(0, 124, 186);
  }
}

.wp-block-overlapping-images-block-overlapping-images.is-selected .el-selected{
  border: 2px solid rgb(0, 124, 186);
  z-index: 2
}

.components-button.overlapping-imgs-layout-button{
  height: auto;
}

.oi-icon-textwrap {
  fill: #fff;
}

.oi-icon-text {
  fill: #e2e2f2;
}

.oi-icon-img-one {
  fill: #bcbccc;
}

.oi-icon-img-two {
  fill: #898999;
}

.oi-icon-text-border {
  fill: #565666;
} 

.overlapping-imgs-uploading{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  width: 100%;
  height: 100%;

  .components-spinner{
    width: 50px;
    height: 50px;
  }
}

.current-layout{
  .oi-icon-img-two {
    fill: #89a9d9;
  }

  .oi-icon-img-one {
    fill: #c0e0ff;
  }

  .oi-icon-text {
    fill: #ddf;
  }

}