@trimble-oss/moduswebcomponents/collection/components/modus-wc-file-dropzone/modus-wc-file-dropzone.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

modus-wc-file-dropzone .modus-wc-file-dropzone .modus-wc-file-input {
  display: none;
}
modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content {
  align-items: center;
  background-color: var(--modus-wc-color-base-page);
  border: 0.125rem dashed var(--modus-wc-color-base-200);
  color: var(--modus-wc-color-base-content);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  height: 201px;
  justify-content: center;
  padding: 0.75rem 1rem;
  transition: background-color 0.2s ease;
  width: 431px;
}
modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over {
  background-color: var(--modus-wc-color-primary-pale);
  border-color: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary);
}
modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type {
  background-color: color-mix(in sRGB, var(--modus-wc-color-error-pale) 80%, transparent);
  border-color: var(--modus-wc-color-error);
  color: var(--modus-wc-color-error);
}
modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success {
  background-color: color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, transparent);
  border-color: var(--modus-wc-color-success);
  color: var(--modus-wc-color-success);
}
modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content .default-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content .default-content span {
  text-align: center;
}
modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content {
  background-color: var(--modus-wc-color-base-100);
  border-color: var(--modus-wc-color-base-100);
  color: var(--modus-wc-color-base-200);
  cursor: not-allowed;
}

[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content,
[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content {
  background-color: var(--modus-wc-color-gray-10);
  color: var(--modus-wc-color-gray-3);
}
[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over,
[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.dragging-over {
  background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);
  border-color: var(--modus-wc-color-highlight-blue);
  color: var(--modus-wc-color-gray-light);
}
[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type,
[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.invalid-file-type {
  background-color: color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);
  border-color: var(--modus-wc-color-red);
  color: var(--modus-wc-color-gray-light);
}
[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success,
[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone .dropzone-content.upload-success {
  background-color: color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);
  border-color: var(--modus-wc-color-green);
  color: var(--modus-wc-color-gray-light);
}
[data-theme=modus-classic-dark] modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content,
[data-theme=connect-dark] modus-wc-file-dropzone .modus-wc-file-dropzone:has(input:disabled) .dropzone-content {
  background-color: var(--modus-wc-color-gray-9);
  border-color: var(--modus-wc-color-gray-3);
  color: var(--modus-wc-color-gray-3);
  cursor: not-allowed;
}