.l-upload {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-upload .l-is-bordered {
  border: 1px solid var(--td-component-border);
}
.l-upload .l-upload__trigger {
  display: inline-block;
}
.l-upload .l-icon {
  font-size: calc(var(--td-font-size-body-medium) + 2px);
  flex-shrink: 0;
}
.l-upload .l-icon-check-circle-filled {
  color: var(--td-success-color);
}
.l-upload .l-icon-error-circle-filled {
  color: var(--td-error-color);
}
.l-upload .l-icon-loading {
  color: var(--td-brand-color);
}
.l-upload .l-icon-time-filled {
  color: var(--td-text-color-placeholder);
}
.l-upload .l-icon-add {
  color: var(--td-text-color-primary);
}
.l-upload__list-file {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-right: var(--td-comp-margin-m);
  overflow: hidden;
}
.l-upload__list-file .l-icon {
  font-size: var(--td-comp-size-xl);
  color: var(--td-brand-color);
}
.l-upload__list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--td-comp-margin-m);
  width: 496px;
  height: 124px;
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-default);
  font: var(--td-font-body-medium);
}
.l-upload__list-item.l-is--error .l-upload__list-name {
  color: var(--td-error-color);
}
.l-upload__list-item.l-is--error .l-upload__list-file .l-icon {
  color: var(--td-error-color);
}
.l-upload__list-content {
  display: flex;
  align-items: center;
}
.l-upload-list__control {
  cursor: pointer;
}
.l-upload-list__control:hover {
  color: var(--td-error-color);
}
.l-upload__list-img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}
.l-upload__list-name {
  max-width: 200px;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-upload--highlight {
  color: var(--td-text-color-brand);
}
.l-upload__single-name {
  margin-right: var(--td-comp-margin-s);
}
.l-upload__card {
  font: var(--td-font-body-small);
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
.l-upload__card .l-is-disabled :hover {
  cursor: not-allowed;
}
.l-upload__card-item {
  float: left;
  cursor: pointer;
  box-sizing: border-box;
  list-style: none;
}
.l-upload__card-item::after {
  content: "";
  display: block;
}
.l-upload__card-item:hover .l-upload__card-mask {
  opacity: 1;
  transition: opacity 0.2s linear;
}
.l-upload__card-item.l-is--error .l-icon-warning_fill {
  color: var(--td-error-color);
  margin-bottom: var(--td-comp-margin-s);
}
.l-upload__card-item.l-is--error .l-upload__card-status {
  color: var(--td-error-color);
}
.l-upload__card-item.l-is-background {
  transition: border-color 0.2s linear;
}
.l-upload__card .l-icon-loading {
  margin-bottom: var(--td-comp-margin-s);
}
.l-upload__card-name {
  max-width: 100%;
  margin-top: var(--td-comp-margin-s);
  color: var(--td-text-color-primary);
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-upload__card-content {
  position: relative;
  width: 110px;
  height: 110px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: var(--td-bg-color-secondarycontainer);
  border: 1px dashed var(--td-component-border);
  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
  border-radius: var(--td-radius-default);
}
.l-upload__card-container {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--td-bg-color-secondarycontainer);
  border: 1px dashed var(--td-component-border);
  box-sizing: border-box;
  position: relative;
  border-radius: var(--td-radius-default);
  transition: border 0.2s linear;
}
.l-upload__card-container:hover {
  border-color: var(--td-brand-color);
  transition: border-color 0.2s linear;
}
.l-upload__card-container > .l-icon,
.l-upload__card-container .l-loading {
  font-size: var(--td-comp-size-xs);
  margin-bottom: var(--td-comp-margin-s);
}
.l-upload__card-container > p {
  color: var(--td-text-color-placeholder);
  margin: 0;
}
.l-upload__card-status-wrap {
  text-align: center;
}
.l-upload__card-status-wrap > svg {
  margin-bottom: var(--td-comp-margin-s);
}
.l-upload__card-status-wrap .l-icon,
.l-upload__card-status-wrap .l-loading {
  font-size: var(--td-comp-size-xs);
}
.l-upload__card-image {
  max-width: 100%;
  max-height: 100%;
}
.l-upload__card-status {
  color: var(--td-text-color-disabled);
  font: var(--td-font-body-small);
}
.l-upload__card-mask {
  background-color: var(--td-mask-active);
  color: var(--td-text-color-anti);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.2s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.l-upload__card-mask-item-divider {
  margin: 0 var(--td-comp-margin-l);
  border-left: 1px var(--td-text-color-anti) solid;
  height: var(--td-comp-size-xxxs);
}
.l-upload__card-mask-item > .l-icon {
  cursor: pointer;
  font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.l-upload__dialog .l-dialog {
  max-width: 80%;
}
.l-upload__dialog .l-dialog--default {
  padding: 32px;
}
.l-upload__dialog .l-dialog-body {
  padding-bottom: 0;
}
.l-upload__dialog .l-dialog-body-img-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.l-upload__dragger {
  display: flex;
  width: 336px;
  height: 144px;
  border: 1px dashed var(--td-component-border);
  border-radius: var(--td-radius-small);
  font: var(--td-font-body-medium);
  color: var(--td-text-color-secondary);
  cursor: pointer;
  padding: var(--td-comp-margin-l);
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  transition: border-color 0.2s linear;
}
.l-upload__dragger.l-is--active {
  background-color: var(--td-bg-color-container-active);
  border-color: var(--td-brand-color);
}
.l-upload__dragger:hover {
  border-color: var(--td-brand-color);
}
.l-upload__dragger-btns {
  position: absolute;
  bottom: var(--td-comp-margin-l);
}
.l-upload__dragger .l-size-s {
  display: block;
}
.l-upload__dragger-center {
  justify-content: center;
  align-items: center;
}
.l-upload__dragger-error {
  border-color: var(--td-error-color);
}
.l-upload__dragger-error:hover {
  border-color: var(--td-error-color);
}
.l-upload__dragger-text {
  display: flex;
  align-items: center;
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  margin-bottom: var(--td-comp-margin-s);
  max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0);
}
.l-upload__dragger-text .l-upload__single-name {
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-upload__tips {
  display: block;
  color: var(--td-text-color-placeholder);
  margin-top: var(--td-comp-margin-s);
  font: var(--td-font-body-small);
}
.l-upload__tips.l-upload__tips-error {
  color: var(--td-error-color);
}
.l-upload__tips.l-upload__tips-warn {
  color: var(--td-warning-color);
}
.l-upload__placeholder {
  color: var(--td-text-color-placeholder);
}
.l-upload__display-text--margin {
  margin-top: var(--td-comp-margin-s);
}
.l-upload__single-display-text {
  color: var(--td-text-color-secondary);
  font: var(--td-font-body-small);
  display: flex;
  align-items: center;
}
.l-upload__single-display-text .l-upload__flow-status .l-icon {
  font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.l-icon-clear-circle-filled {
  color: var(--td-text-color-placeholder);
  margin-top: var(--td-comp-margin-xxs);
  transition: color 0.2s linear;
}
.l-icon-clear-circle-filled:hover {
  color: var(--td-text-color-secondary);
  cursor: pointer;
  transition: color 0.2s linear;
}
.l-upload__single-percent {
  margin-left: var(--td-comp-margin-xs);
}
.l-upload__single-progress {
  color: var(--td-brand-color);
  display: flex;
  align-items: center;
}
.l-upload__single-progress .l-loading {
  font-size: calc(var(--td-font-size-body-medium) + 2px);
  flex-shrink: 0;
}
.l-upload__single-input-delete {
  margin-left: var(--td-comp-margin-l);
  font: var(--td-font-body-medium);
  color: var(--td-brand-color);
  cursor: pointer;
}
.l-upload__single-input-preview {
  display: flex;
  justify-content: space-between;
  flex: 1;
  max-width: calc(100% - 162px);
}
.l-upload__single-input-text {
  display: block;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-upload__single-file-input {
  display: flex;
  align-items: center;
}
.l-upload__single-file-input .l-upload__trigger {
  margin-left: var(--td-comp-margin-l);
}
.l-upload__single-file-input .l-upload__single-progress {
  white-space: nowrap;
}
.l-upload__single-file-input .l-input__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-upload__dragger-progress {
  width: 100%;
  display: flex;
}
.l-upload__dragger-progress .l-icon,
.l-upload__dragger-progress .l-loading {
  font-size: calc(var(--td-font-size-body-medium) + 2px);
  flex-shrink: 0;
}
.l-upload__dragger-img-wrap {
  width: 110px;
  height: 110px;
  background-color: var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.l-upload__dragger-img-wrap > img {
  max-width: 100%;
  max-height: 100%;
}
.l-upload__dragger-img-wrap + .l-upload__dragger-progress-info {
  margin-left: var(--td-comp-margin-l);
  max-width: calc(336px - var(--td-comp-margin-l) * 2 - calc(110px + var(--td-comp-margin-l)));
}
.l-upload__dragger-progress-info {
  flex: 1;
}
.l-upload__dragger-progress-info .l-upload__single-display-text {
  margin-bottom: var(--td-comp-margin-s);
}
.l-upload__dragger-progress-info .l-button:hover {
  background-color: transparent;
}
.l-upload__dragger-progress-cancel,
.l-upload__dragger-progress-reupload {
  margin-right: var(--td-comp-margin-l);
}
.l-upload__dragger-progress-cancel:hover,
.l-upload__dragger-progress-reupload:hover {
  border-color: transparent;
}
.l-upload__dragger-delete-btn:hover,
.l-upload__dragger-upload-btn:hover {
  border-color: transparent;
}
.l-upload__flow-image-flow {
  width: 498px;
}
.l-upload__flow {
  min-width: 498px;
  max-width: 960px;
}
.l-upload__flow-placeholder {
  display: inline-block;
  margin-left: var(--td-comp-margin-l);
}
.l-upload__flow-op {
  display: flex;
  align-items: center;
}
.l-upload__flow-bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--td-comp-margin-xxl);
}
.l-upload__flow-bottom .l-button + .l-button {
  margin-left: var(--td-comp-margin-s);
}
.l-upload__flow-empty {
  width: 100%;
  height: 184px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--td-text-color-placeholder);
}
.l-upload__flow-table {
  width: 100%;
  border: 1px dashed var(--td-component-border);
  margin-top: var(--td-comp-margin-xxl);
  border-collapse: collapse;
}
.l-upload__flow-table > thead > tr,
.l-upload__flow-table > tbody > tr,
.l-upload__flow-table > tfoot > tr,
.l-upload__flow-table > tr {
  border-top: 1px solid var(--td-component-border);
}
.l-upload__flow-table > thead > tr > th,
.l-upload__flow-table > tbody > tr > th,
.l-upload__flow-table > tfoot > tr > th,
.l-upload__flow-table > tr > th {
  color: var(--td-text-color-placeholder);
  font-weight: normal;
  border: 1px solid var(--td-component-border);
  text-align: left;
  background-color: var(--td-bg-color-container);
}
.l-upload__flow-table > thead > tr > td,
.l-upload__flow-table > tbody > tr > td,
.l-upload__flow-table > tfoot > tr > td,
.l-upload__flow-table > tr > td {
  color: var(--td-text-color-primary);
}
.l-upload__flow-table > thead > tr > td,
.l-upload__flow-table > tbody > tr > td,
.l-upload__flow-table > tfoot > tr > td,
.l-upload__flow-table > tr > td,
.l-upload__flow-table > thead > tr > th,
.l-upload__flow-table > tbody > tr > th,
.l-upload__flow-table > tfoot > tr > th,
.l-upload__flow-table > tr > th {
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
}
.l-upload__flow-table__batch-row {
  border-left: 1px solid var(--td-component-border);
}
.l-upload__flow-button {
  color: var(--td-text-color-placeholder);
  cursor: pointer;
  transition: color 0.2s linear;
}
.l-upload__flow-button:hover {
  color: var(--td-text-color-secondary);
}
.l-upload__flow-status {
  display: flex;
  align-items: center;
}
.l-upload__flow-status .l-icon,
.l-upload__flow-status .l-loading {
  margin-right: var(--td-comp-margin-s);
  font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.l-upload__flow-card-area {
  border: 1px dashed var(--td-component-border);
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
  margin-top: var(--td-comp-margin-xxl);
  transition: border 0.2s linear;
}
.l-upload__flow-card-area:hover {
  border-color: var(--td-brand-color);
  transition: border-color 0.2s linear;
}
.l-upload__flow-card-area .l-upload__card-item {
  margin: var(--td-comp-margin-xs);
}
.l-upload__icon-delete,
.l-upload__single-input-clear {
  color: var(--td-text-color-placeholder);
  cursor: pointer;
  transition: color 0.2s linear;
}
.l-upload__icon-delete:hover,
.l-upload__single-input-clear:hover {
  color: var(--td-text-color-secondary);
  transition: color 0.2s linear;
}
.l-upload__single-input-clear {
  display: none;
}
.l-upload__single-input-preview:hover .l-upload__single-input-clear {
  display: initial;
}
.l-upload__single-input-preview:hover .l-upload__status-icon {
  display: none;
}
.l-upload .l-upload__single-name {
  color: var(--td-text-color-secondary);
}
.l-upload__card-name {
  margin-top: 8px;
}
.l-upload--theme-file-input {
  width: 100%;
}
.l-upload__dragger-btns > .l-button {
  padding: 0;
}
