.ds-file-upload {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--bh-file-upload-root-max-width);
  display: grid;
  gap: var(--bh-space-xl-12);
  color: var(--bh-content-default);
  font-family: var(--bh-font-family);
  letter-spacing: 0;
}

.ds-file-upload *,
.ds-file-upload *::before,
.ds-file-upload *::after {
  box-sizing: border-box;
}

.ds-file-upload--sm {
  max-width: var(--bh-file-upload-content-max-width);
}

.ds-file-upload__dropzone {
  min-height: calc(var(--bh-space-14xl-192) + var(--bh-space-xs-4));
  display: grid;
  place-items: center;
  gap: var(--bh-space-md-8);
  padding: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2)) var(--bh-space-5xl-24);
  border: var(--bh-space-xxxs-1) dashed var(--bh-border-default);
  border-radius: var(--bh-radius-lg-8);
  background: var(--bh-bg-muted);
  text-align: center;
}

.ds-file-upload--sm .ds-file-upload__dropzone {
  min-height: calc(var(--bh-space-13xl-160) - var(--bh-space-sm-6));
  padding: var(--bh-space-5xl-24) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
}

.ds-file-upload__dropzone.is-dragging {
  border-color: var(--bh-border-brand-strong);
  background: var(--bh-bg-brand-soft);
}

.ds-file-upload__dropzone[aria-disabled="true"] {
  opacity: var(--bh-opacity-disabled-media);
}

.ds-file-upload__input {
  display: none;
}

.ds-file-upload__icon {
  width: var(--bh-space-8xl-48);
  height: var(--bh-space-8xl-48);
  display: grid;
  place-items: center;
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  border-radius: var(--bh-control-default);
  background: var(--bh-bg-default);
  color: var(--bh-content-subtle);
}

.ds-file-upload__icon svg {
  width: var(--bh-space-5xl-24);
  height: var(--bh-space-5xl-24);
}

.ds-file-upload__dropzone p {
  margin: 0;
  color: var(--bh-content-default);
  font-size: var(--bh-text-body-md-font-size);
  line-height: var(--bh-text-body-md-line-height);
}

.ds-file-upload__browse {
  border: 0;
  background: transparent;
  color: var(--bh-content-link);
  padding: 0;
  font: inherit;
  font-weight: var(--bh-font-weight-semibold);
  cursor: pointer;
}

.ds-file-upload__browse:focus-visible {
  border-radius: var(--bh-radius-sm-4);
  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
  outline-offset: var(--bh-space-xxs-2);
}

.ds-file-upload__helper {
  color: var(--bh-content-muted);
  font-size: var(--bh-text-body-xs-regular-font-size);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.ds-file-upload__list {
  display: grid;
  gap: var(--bh-space-xl-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-file-upload-row {
  display: grid;
  grid-template-columns: var(--bh-space-7xl-40) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--bh-space-xl-12);
  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-md-8));
  padding: var(--bh-space-3xl-16);
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-lg-8);
  background: var(--bh-bg-raised);
  box-shadow: var(--shadow-component-default);
}

.ds-file-upload-row--sm {
  grid-template-columns: var(--bh-space-6xl-32) minmax(0, 1fr) auto;
  gap: var(--bh-space-md-8);
  min-height: calc(var(--bh-space-8xl-48) + var(--bh-space-lg-10));
  padding: var(--bh-space-xl-12);
}

.ds-file-upload-row--error {
  border-color: var(--bh-border-danger-subtle);
}

.ds-file-upload-row__file-icon {
  width: var(--bh-space-7xl-40);
  height: var(--bh-space-7xl-40);
  display: grid;
  place-items: center;
  border-radius: var(--bh-control-default);
  background: var(--bh-interactive-secondary-default);
  color: var(--bh-content-subtle);
}

.ds-file-upload-row--sm .ds-file-upload-row__file-icon {
  width: var(--bh-space-6xl-32);
  height: var(--bh-space-6xl-32);
}

.ds-file-upload-row__file-icon svg,
.ds-file-upload-row__status svg {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
}

.ds-file-upload-row__copy {
  min-width: 0;
  display: grid;
  gap: var(--bh-space-xxs-2);
}

.ds-file-upload-row__copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--bh-content-default);
  font-size: var(--bh-text-body-sm-regular-font-size);
  font-weight: var(--bh-font-weight-semibold);
  line-height: var(--bh-text-body-sm-regular-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-file-upload-row__copy span,
.ds-file-upload-row__copy em {
  color: var(--bh-content-muted);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-style: normal;
  line-height: var(--bh-text-body-2xs-regular-line-height);
}

.ds-file-upload-row__copy em {
  color: var(--bh-content-danger-default);
}

.ds-file-upload-row__status {
  width: var(--bh-space-5xl-24);
  height: var(--bh-space-5xl-24);
  display: grid;
  place-items: center;
}

.ds-file-upload-row__status--uploaded {
  color: var(--bh-content-success-default);
}

.ds-file-upload-row__status--uploading {
  color: var(--bh-content-brand-default);
}

.ds-file-upload-row__status--error {
  color: var(--bh-content-danger-default);
}

.ds-file-upload-row__actions {
  display: flex;
  align-items: center;
  gap: var(--bh-space-xs-4);
}

.ds-file-upload-row--sm .ds-file-upload-row__actions {
  grid-column: 2 / -1;
  justify-content: flex-start;
}

.ds-file-upload-row__actions button {
  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  border: 0;
  border-radius: var(--bh-control-default);
  background: var(--bh-interactive-secondary-default);
  color: var(--bh-content-default);
  padding: 0 var(--bh-space-lg-10);
  font: inherit;
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-font-weight-semibold);
  cursor: pointer;
}

.ds-file-upload-row__actions button:hover {
  background: var(--bh-interactive-ghost-hover);
}

.ds-file-upload[dir="rtl"] {
  font-family: var(--bh-font-family);
}
