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

.wp-block-create-block-gutenberg-draggable-images {
	border: 1px dotted #f00;
}


.gutenberg-draggable-images {

  &__container {
	border: 2px solid red;
	padding: 0!important;
	margin: auto;
  }

  &__notices {
	min-height: 100px;
	position: relative;
	&_draggable_img {
	  cursor: grab;
	  position: absolute;
	  top:0;
	  left:0;

	}

	&.in-draggable {
	  cursor: grabbing;
	}
  }

  // panel
  &__input-group {
	width: 100%;
	display: flex;
	flex-flow: column;
	margin-bottom: 10px;
	padding-left: 5px;

	select {
	  max-width: 100%;
	}
  }

  &__example-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px solid #007cba4a;
	min-height: 200px;
	&:nth-child(even){
	  background-color: #80808012;
	}


	&_add-img {
	  cursor: pointer;
	  display: flex;
	  width: 100%;
	  justify-content: center;
	  align-items: center;
	  border: 1px solid #007cba;
	  background: #007cba;
	  color: #fff;
	  padding: 10px 0;
	  text-transform: capitalize;
	  &:hover {
		background: #fff;
		color: #007cba;
	  }
	}

	&_img {
	  width: 50%;
	}

	&_inputs {
	  width: 50%;

	  &_btn-del{
		cursor: pointer;
		color: red;
		display: block;
		text-align: right;
		font-size: 25px;
		transform: translate(-8px, -15px);
	  }

	  &_inp-size {
		width: 100%;

	  }

	  &_z-index {
		width: 100%;
	  }

	  &_animation {
		margin: 5px;
	  }

	}



  }

}