import styled from 'styled-components';

export const Wrapper = styled.div`
  span{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    .ant-upload-select{
      padding-left:4px;
    }
    .ant-upload-list-text-container{
      :first-child{
          margin-top:5px;
      }
      :hover{
        .ant-upload-span{
          background:#f5f7fa;
          .ant-upload-list-item-name{
              color:#3582fb !important;
          }
          .ant-upload-list-item-card-actions{
            display: flex;
          }
          :before{
            transition: color .3s;
            display:none;
          }
        }
      }
  }
  .ant-upload-span{
      display:-webkit-box !important;
      box-sizing: content-box;
      position:relative;
      margin-top: 10px;
      transition: all .5s cubic-bezier(.55,0,.1,1);
      font-size: 14px;
      color: #606266;
      line-height: 1.8;
      position: relative;
      margin-top:4px;
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;
      background:transparent;
      list-style: none;
      :before{
        font-family: "iconfont" !important;
        font-size: 14px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position:absolute;
        content:"\\e677";
        display:block;
        color:#9fec76;
        top:0px;
        right:5px;
        border-radius:10px;/**控制形状**/
      }
      .ant-upload-text-icon{
        height: 100%;
        margin-right: 7px;
        color: #909399;
        line-height: inherit;
        font-family: element-icons !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        vertical-align: baseline;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ant-upload-list-item-name{
        width: auto;
          color: #606266;
          display: block;
          margin-right: 40px;
          background:inherit;
          overflow: hidden;
          padding-left: 4px;
          text-overflow: ellipsis;
          transition: color .3s;
          white-space: nowrap;
      }
      .ant-upload-list-item-card-actions{
          position:absolute;
          height:100%;
          top:0px;
          text-align:center;
          background:transparent !important;
          display: none;
          flex-direction:row;
          transition: all .3s;
          button{
            height:100%;
            width: 20px;
            display:flex;
            justify-content:center;
            align-items:center;
            background:transparent !important;
            .anticon-close{
                top:unset;
                right:unset;
            }
          }
      }
  }
  }
`