.responsive-block-editor-addons-image-control {
  .responsive-block-editor-addons-placeholder {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f1f1;
    margin-bottom: 12px;
    margin-top: 0.6rem;
    svg {
      height: 50px;
      fill: #ddd;
    }
  }
  .responsive-block-editor-addons-placeholder,
  .responsive-block-editor-addons-image-preview {
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    &:hover {
      background: #fafafa;
    }
    &:focus {
      background: #fafafa;
      box-shadow: 0 0 0 2px rgba(30, 140, 190, 0.8);
    }
  }
  .responsive-block-editor-addons-image-preview-wrapper {
    position: relative;
    z-index: 1; // Prevent this from going on top of the 3-tabs.
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f1f1;
    margin-top: 0.6rem;
    border-radius: 4px;
    svg {
      stroke: rgba(0, 0, 0, 0.3);
      stroke-width: 1px;
      fill: #fff;
    }
  }
  .responsive-block-editor-addons-image-preview {
    min-width: 100px;
    flex: 1 1 100px;
    margin: 0;
    position: relative;
    z-index: 2;
    object-fit: contain;
    width: auto;
    height: auto;
  }
  .responsive-block-editor-addons-image-preview-remove {
    background: none !important;
    color: #ddd;
    border: none;
    position: absolute;
    top: 10px;
    right: 4px;
    cursor: pointer;
    z-index: 3;
  }
}