.file-upload-form{
  border-radius: var(--borders-radius-interface, 6px);
  border: 1px dashed var(--color-on-surface-neutral-disabled);
  display: flex;
  height: 163px;
  padding: var(--spacing-small, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs, 12px);
  align-self: stretch;
  cursor: pointer;
  .file-upload-form-container{
    text-align: center;
  }
  &:hover{
    background-color: var(--color-surface-neutral-hover, #EBECEE);
    border: 1px dashed var(--color-on-surface-neutral-secondary);
  }
  .material-symbols-rounded{
    color: var(--color-on-surface-neutral-secondary);
  }
  .upload-form-title{
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-700);
  }
  .file-restrictions{
    font-size: var(--font-size-s);
    color: var(--color-on-surface-neutral-secondary)
  }
  .drop-content{
    display: none;
    .drop-text{
      font-size: var(--font-size-s);
      font-weight: var(--font-weight-700);
    }
  }
  &.hover{
    background-color: var(--color-surface-brand-idle);
    border: 1px solid var(--color-surface-brand-idle);
    .file-upload-form-container{
      display: none;
    }
    .drop-content{
      display: flex !important;
      .material-symbols-rounded,
      .drop-text{
        color: var(--color-on-surface-alt-primary) !important;
      }
    }
  }
  &.disabled{
    pointer-events: none;
    border: 1px dashed var(--color-on-surface-neutral-disabled, #C3C7CD);
    i,
    .upload-form-title,
    .file-restrictions{
      color: var(--color-on-surface-neutral-disabled)
    }
  }
}
.file-upload-list{
  margin-top: 12px;
  .material-symbols-rounded{
    color: var(--color-on-surface-neutral-secondary);
  }
  .file-upload-list-item{
    width: 100%;
    background-color: var(--color-surface-neutral-nested);
    border-radius: var(--border-radius-interface);
    padding: 4px 8px;
    margin-bottom: 8px;
    &:last-of-type{
      margin-bottom: 0;
    }
  }

}