@import "../../../style/mixin.scss";

@include export-module('co-image-upload-theme') {
  .co-image-upload {
    .upload-container {
      border: var(--co-inphoto-upload-border-width) dotted var(--co-inphoto-upload-border-color);

      .image-upload-icon {
        background: #f0f0f0;
        @include default-icon(50px, 50px, #000);
      }

      .upload-content-text {
        font-size: var(--co-inphoto-font-size-label);
        padding: 5px;
      }
    }

    .upload-container.dragging {
      border-color: var(--co-inphoto-upload-dragging-border-color);
      background: var(--co-inphoto-upload-dragging-background);
    }

    .upload-container.disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    .upload-content .upload-button {
      @include primary-button;
    }

    .uploaded-files-preview-container {
      .uploaded-file-preview {
        .uploaded-file-overlay {
          background-color: var(--co-inphoto-loader-background-dark);

          .remove-button {
            @include default-icon(20px, 20px, #fff);
          }
        }
      }
    }
  }

  .image-upload-compact {
    .upload-container {
      p {
        font-size: 10px;
      }
    }
  }
}

