@import '~antd/lib/upload/style/index';

@import '../../themes/default/index';
@import '../../mixins/index';

@import './upload-dragger';

@form-prefix-cls: ~'@{ant-prefix}-form';
@ps-upload-prefix-cls: ~"@{polestar-prefix}-upload";

.@{ps-upload-prefix-cls} {
  &-container {
    .@{ps-upload-prefix-cls} {
      .@{upload-prefix-cls} {
        &&-drag {
          padding: 15px;
          margin:5px 0;
      
          &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
            border: 1px dashed @primary-8;
            background-color: @primary-1;
          }
      
          &:not(.@{upload-prefix-cls}-disabled):hover {
            border-color: @border-color-base;
          }
      
          .@{form-prefix-cls}-item {
            text-align: left;
            label {
              //background-color: ;
            }
          }
        }
      }
      
      .@{upload-prefix-cls}-list {
        background-color: @upload-list-background-color;
        border-radius: @border-radius-base;
      
        .reset-component;
        .clearfix;
        &-item {
          margin: 5px 10px;
      
          &-name {
            color: @upload-list-item-name-color;
            font-size: @font-size-sm;
      
            &:hover{
              color: @upload-list-item-name-color-hover;
            }
          }
          &-info {
            .@{iconfont-css-prefix}-loading,
            .@{iconfont-css-prefix}-paper-clip {
              font-size: @font-size-sm;
              font-weight: @upload-list-icon-font-weight;
            }
          }
      
          .@{iconfont-css-prefix}-cross {
              font-weight: @upload-list-icon-font-weight;
              color: @upload-list-item-name-color;
            &:hover {
              font-weight: @upload-list-icon-font-weight;
              color: @upload-list-item-name-color;
            }
          }
      
          &-error .@{iconfont-css-prefix}-cross {
            font-weight: @upload-list-icon-font-weight;
            top:3px;
          }
      
          &:hover &-info {
            background-color: @upload-list-item-hover;
          }
      
          &-error &-name {
            &:hover{
              color: @error-color;
            }
          }
        }
      }
    }
    &.upload-horizontal {
      .@{ps-upload-prefix-cls} {
        display: flex;
        .@{upload-prefix-cls}-list {
          width: 100%;
        }
      }
      &.button-placement-right {
        .@{ps-upload-prefix-cls} {
          flex-direction: row-reverse;
        }
      }
    }
    &.button-placement-bottom {
      .@{ps-upload-prefix-cls} {
        display: flex;
        flex-direction: column-reverse;
      }
    }
  }
}