/**
 * Transform a px value to its rem equivalent
 * ex: px-to-rem(14px) => return 0.875rem
 */
:host(.ods-file-upload) {
  display: inline-flex;
  flex-flow: column;
  row-gap: 8px;
  border: dashed 1px var(--ods-color-form-element-border-default);
  border-radius: 4px;
  overflow: hidden;
  color: var(--ods-color-text);
}

:host(.ods-file-upload--disabled) {
  border-color: var(--ods-color-border-disabled-default);
  background-color: var(--ods-color-background-disabled-default);
  cursor: not-allowed;
  color: var(--ods-color-text-disabled-default);
}
:host(.ods-file-upload--disabled) .ods-file-upload__dropzone__icon {
  color: var(--ods-color-text-disabled-default);
}

:host(.ods-file-upload--error) {
  border-color: var(--ods-color-critical-500);
}

.ods-file-upload__dropzone {
  display: inline-flex;
  flex-flow: column;
  row-gap: 8px;
  align-items: center;
  padding: 24px 24px 0;
}
.ods-file-upload__dropzone--dragging {
  background-color: var(--ods-color-primary-100);
}
.ods-file-upload__dropzone--empty {
  padding: 24px;
}
.ods-file-upload__dropzone__input {
  display: none;
}
.ods-file-upload__dropzone__icon {
  color: var(--ods-color-primary-500);
  font-size: 2rem;
}
.ods-file-upload__dropzone__rules {
  display: flex;
  flex-flow: column;
  align-self: flex-start;
}
.ods-file-upload__dropzone__rules__file-format, .ods-file-upload__dropzone__rules__max-file, .ods-file-upload__dropzone__rules__max-size {
  font-size: 0.75rem;
}
.ods-file-upload__dropzone__error {
  display: flex;
  flex-flow: column;
  row-gap: 8px;
  width: 100%;
  color: var(--ods-color-critical-500);
  font-size: 0.75rem;
  font-weight: 600;
}
.ods-file-upload__list {
  display: flex;
  flex-flow: column;
  row-gap: 4px;
  padding-bottom: 24px;
}