:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  list-style-type: none;
  margin: 0.75rem 0;
  padding: 0;
}

:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-preview, .file-upload-preview) {
  position: relative;
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background-color: white;
  box-shadow: var(--shadow-2);
  height: 100%;
  transition: all var(--animation-duration);
}

:is(.file-control, .dlg-file-upload) .file-functions {
  padding: 0.25em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--slateA4);
  font-size: 0.8rem;
}

:is(.file-control, .dlg-file-upload) .file-functions .crop-hint-icon {
  display: none;
}

:is(.file-control, .dlg-file-upload) :is(.sort-handle, .btn-edit, .btn-remove) {
  padding: 0.2em 0.33rem;
  line-height: 1;
  aspect-ratio: 1;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--slateA7);
  transition: color var(--animation-duration);
  border-radius: var(--btn-border-radius);
}

:is(.file-control, .dlg-file-upload) :is(.sort-handle, .btn-edit, .btn-remove) .icon {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  pointer-events: none;
}
/* WW-9781 Sortierung bei einer Datei unsinnig */
.file-control[data-context-max="1"] .sort-handle {
	visibility: hidden;
}

:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-upload-preview, .file-preview):hover .btn-remove {
  color: var(--red10);
}

:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-upload-preview, .file-preview) .btn-remove:hover {
  background-color: var(--redA3);
}

:is(.file-control, .dlg-file-upload) :is(.file-preview.image, .file-upload-preview, .file-preview) .image {
  width: 100%;
  aspect-ratio: 2;
  background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".05" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" />\</svg>');
  background-size: 20px 20px;
  background-color: var(--slate1);
}

:is(.file-control, .dlg-file-upload) :is(.file-preview.image, .file-upload-preview, .file-preview) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}

:is(.file-control, .dlg-file-upload) :is(.file-preview.image, .file-upload-preview, .file-preview) img::before {
  content: '';
  position: absolute;
  width: 100%;
  height: calc(100% + 0px);
  background-color: var(--slate3);
  inset: 0;
}


:is(.file-control, .dlg-file-upload) :is(.image-text, .info, .document-text) {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--slateA4);
  padding: 0.5rem;
  line-height: 1.4;
  font-size: 0.8em;
}

:is(.file-control, .dlg-file-upload) :is(.image-text, .info) .image-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}


:is(.file-control, .dlg-file-upload) :is(.image-text, .info, .document-text) .document-icon {
  display: none;
}

:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-preview, .file-upload-preview) .image {
  position: relative;
}

:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-preview, .file-upload-preview) .video-icon-container {
  position: absolute;
  width: 2.33rem;
  height: 2.33rem;
  background-color: hsla(0, 0%, 100%, .3);
  top: .33rem;
  right: .33rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--slateA5);
  color: var(--slateA11);
}

:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-preview, .file-upload-preview) .transcoding-banner {
  display: none;
  position: absolute;
  width: 100%;
  bottom: 3rem;
  padding: .3em;
  font-weight: bold;
  background: var(--yellow4);
  color: var(--yellow12);
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--yellow5);
  text-align: center;
  font-size: .875rem;
  z-index: 2;
  box-shadow: var(--shadow-2);
}


:is(.file-control, .dlg-file-upload) :is(.file-list, .file-upload-previews) :is(.file-preview, .file-upload-preview).status-transcoding .transcoding-banner {
  display: block;
}