.dlg-file-upload {
  display: grid;
  grid-template-rows: auto minmax(322px, 1fr) auto;
  top: 0;
  bottom: 0;
  min-height: 300px;
  max-height: calc(100vh - 2rem);
  width: calc(100vw - 2rem);
  max-width: 1200px;
}

.dlg-file-upload .file-upload-previews {
  grid-template-columns: repeat(auto-fit, minmax(220px, 0.333fr));
}

.dlg-file-upload .drop-area {
  width: auto;
  margin-block: 1rem;
  margin-inline: -1rem;
}

.dlg-file-upload .file-upload-previews .file-upload-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  aspect-ratio: 1.2;
}

.dlg-file-upload .file-upload-preview .image {
  aspect-ratio: auto !important;
}


.dlg-file-upload.max-reached .drop-area label.btn,
.dlg-file-upload.max-reached .drop-area .dragdrop-hint {
  display: none;
}


.file-upload-previews .btn-remove {
  margin-left: auto;
}

.file-upload-previews .file-upload-preview {
  position: relative;
}

.file-upload-previews .file-upload-preview .error-container {
  display: none;
  position: relative;
  top: -0.05em;
  margin: 0.4em 1em 0.4em 0.2em;
  line-height: 1.4;
  color: var(--red1);
  align-self: center;
  align-items: top;
}

.file-upload-previews .file-upload-preview.error .error-container {
  display: flex;
}

.file-upload-previews .error-container .error-icon {
  display: inline-block;
  position: relative;
  top: 0.1em;
  vertical-align: baseline;
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.5rem 0 0.25rem;
}

.file-upload-previews .file-upload-preview.error {
  border-color: var(--red10);
  background-color: var(--red1);
}

.file-upload-previews .file-upload-preview.error .file-functions {
  background-color: var(--red10);
}

.file-upload-previews .file-upload-preview.error .btn-remove {
  color: var(--red4);
}

.dlg-file-upload .file-upload-previews .file-upload-preview.error:hover .btn-remove:hover {
  color: var(--red1);
  background-color: var(--redA8);
}

.dlg-file-upload .file-upload-previews .file-upload-preview.error:hover .btn-remove {
  color: var(--red3);
  background-color: var(--redA7);
}

.file-upload-previews .file-upload-preview.valid {
  /* border-style: solid;
  border-color: var(--green6);
  background-color: var(--greenA1); */
}

.progress-container {
  display: none;
  margin: 0.2em;
  align-items: center;
  color: var(--base-color-A10);
}

.file-upload-previews .file-upload-preview.progress {
  border-color: var(--base-color-8);
  background-color: var(--base-color-2);
}

.file-upload-previews .file-upload-preview.progress .progress-container {
  display: flex;
}

.progress-ring {
  width: 1.25rem;
  aspect-ratio: 1;
  margin: 0.2em 0.33em 0 0.25em;
}

.progress-ring circle {
  fill: none;
  stroke-width: 10%;
}

.progress-ring .bg {
  fill: none;
  stroke: var(--slate8);
}

.progress-ring .meter {
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  stroke: currentColor;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: 0.35s stroke-dashoffset;
}

.file-upload-previews .uploaded-container {
  display: none;
}

.file-upload-previews .file-upload-preview.uploaded {
  border-color: var(--green10);
  background-color: var(--green2);
}

.file-upload-previews .file-upload-preview.uploaded .uploaded-container {
  display: flex;
}

.file-upload-previews .file-upload-preview.uploaded .btn-remove {
  display: none;
}

.file-upload-previews .file-upload-preview .uploaded-icon {
  margin: 0.325rem 0.5rem 0;
  align-self: center;
  color: var(--green11);
}

.file-upload-previews .file-upload-preview .uploaded-icon .icon {
  width: 1.2rem;
  aspect-ratio: 1;
}

.file-upload-previews .file-control {
  padding: 0.25em;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--slate3);
}

.file-upload-preview .name {
  line-break: anywhere;
}

.file-upload-preview figure {
  display: block;
  margin: 0;
  width: 100px;
}