@use '../../styles/theme.scss';
@use "../../styles/color";
@use "../../styles/def";


$upload-prefix-cls: #{def.$prefixCls}-upload;

.#{$upload-prefix-cls} {
  margin: 0;
  padding: 0;
  color: theme.$text-color;
  font-size: theme.$font-size-base;
  font-variant: theme.$font-variant-base;
  line-height: theme.$line-height-base;
  list-style: none;
  font-feature-settings: theme.$font-feature-settings-base;

  &-error {
    color: color.$error-color !important;

    &:hover {
      color: color.$error-color !important;
      opacity: 1;
    }
  }

  &-list {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: theme.$text-color;
    font-size: theme.$font-size-base;
    font-variant: theme.$font-variant-base;
    line-height: theme.$line-height-base;
    list-style: none;
    transition: background-color 0.3s;
    font-feature-settings: theme.$font-feature-settings-base;

    line-height: theme.$line-height-base;

    &-item {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      padding-left: theme.$margin-xs;
      padding-right: theme.$margin-xs;
      margin-top: theme.$margin-xss;
      margin-bottom: theme.$margin-xss;
      transition: opacity theme.$animation-duration-slow, height theme.$animation-duration-slow;
      border: theme.$border-width-base theme.$border-style-base theme.$border-color-base;
      border-radius: theme.$border-radius-md;

      &:hover {
        background-color: theme.$item-hover-bg;
        border-color: theme.$text-color-secondary;
        opacity: 1;
      }

      &::before {
        display: table;
        width: 0;
        height: 0;
        content: '';
      }

      &-thumbnail {
        display: flex;
        width: 48px;
        height: 48px;
        justify-content: center;
        line-height: 60px;
        align-items: center;
        opacity: 0.8;
        margin-right: 4px;
        color: color.$primary-5;
        cursor: pointer;

        img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }
      }

      &-thumbnail-file {
        cursor: default;
      }

      &-name {
        color: theme.$text-color;
        flex: 1;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 theme.$padding-xs;
      }

      &-action-icon {
        transition: opacity theme.$animation-duration-slow;
        position: static;
        flex: none;
        color: theme.$text-color;
        right: 0;
        opacity: 0.4;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }
    }

    &-item-error {
      border-color: color.$error-color;
      border-style: dashed;
    }

    &::before {
      display: table;
      content: '';
    }

    &::after {
      display: table;
      clear: both;
      content: '';
    }
  }
}