ux-file-input {
  display: block;
  width: 100%;
  color: #212121;
  color: var(--ux-theme--input-file-foreground, var(--ux-swatch--grey-p900));
}

ux-file-input form > input {
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

ux-file-input .files-list .file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
}

ux-file-input .files-list .file .generic-preview {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='currentColor'><path d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'></path></svg>") no-repeat center center;
}

ux-file-input .files-list .file .image-preview {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background-size: cover;
  background-position: center center;
}

ux-file-input .files-list .name-zone {
  width: 100%;
  font-size: 12px;
  color: var(--ux-swatch--grey-p700);
}

ux-file-input .files-list .name {
  width: 100%;
}

ux-file-input .files-list .infos {
  color: var(--ux-swatch--grey-p300);
  font-size: 70%;
}

ux-file-input .files-list .file ux-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

ux-file-input .files-list .file ux-icon svg {
  transform: scale(0.7);
}

ux-file-input .files-list .file .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: red;
  width: 0; 
}
ux-file-input .files-list ux-icon {
  flex-shrink: 0;
}