@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(upload) {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  @include e(content) {
    display: flex;
    flex-direction: column;
  }
  @include e(inner) {
    display: none;
  }
  @include e(list) {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  @include e(item) {
    display: flex;
    align-items: center;
    background-color: getCssVar("color", "fill-2");
    padding: 8px 12px;
    gap: 12px;
    border-radius: getCssVar("radius", "medium");
  }
  @include e(name) {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @include e(progress) {
    flex: 1;
  }
  @include e(actions) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  @include e(action) {
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: getCssVar("font-size", "medium");
    border-radius: getCssVar("radius", "medium");
    cursor: pointer;
    &:hover {
      color: getCssVar("color", "primary-6");
      background-color: getCssVar("color", "fill-2");
    }
  }
  @include e(drag-wrapper) {
    background-color: getCssVar("color", "fill-2");
    border: 1px dashed getCssVar("color", "fill-3");
    border-radius: getCssVar("radius", "medium");
    transition: transform 0.3s getCssVar("bezier", "1");
    &:hover {
      background-color: getCssVar("color", "fill-3");
    }
    @include when(dragover) {
      border: 1px dashed getCssVar("color", "primary-6");
    }
  }
  @include e(drag-content) {
    height: 100%;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
  }
}