import styled from 'styled-components';

export const Warpper = styled.div.attrs({
  marginTop: 'calc((1.875rem - 1.4285714286 *0.875rem)/2)'
})`
  .ant-upload-picture-card-wrapper{
    .ant-upload-list-picture-card{
      .ant-upload-select-picture-card{
        width:${(props: any) => props.width ? props.width : '60px'};
        height:${(props: any) => props.height ? props.height : '60px'};
        border-radius:4px;
        position:relative;
        display:inline-block;
        font-size:22px;
      }
      .ant-upload-list-picture-card-container{
        position:relative;
        display:inline-block;
        width:${(props: any) => props.width ? props.width : '68px'};
        height:${(props: any) => props.height ? props.height : '68px'};
        .ant-upload-list-item{
          border-radius:4px;
          border:0px;
          width:100%;
          height:${(props: any) => props.thumbMode === 'cover' ? '100%' : props.imgHeight};
          padding:${(props: any) => props.padding ? props.padding : '0px'};
          display: flex;
          align-items: center;
          justify-content: center;
          border:1px solid #d9d9d9;

          .ant-upload-list-item-info{
            position:relative;
            overflow:hidden;
            width:100%;
            height:100%;
            .ant-upload-span{
              width:100%;
              height:100%;
              img {
                position: ${(props: any) => props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? 'absolute' : 'static'};
                    width: ${(props: any) => props.thumbMode === 'w-full' ? '100%' : (props.thumbMode === 'h-full' ? 'auto' : '100% !important')};
                    object-fit:${(props: any) => props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? 'unset' : props.thumbMode};
                    height: ${(props: any) => props.thumbMode === 'w-full' ? 'auto' : (props.thumbMode === 'h-full' ? '' : '100% !important')};
                    transform:  ${(props: any) => props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? 'translate(-50%,-50%)' : 'translate(0,0)'};
                    max-height:100%;
                    top: ${(props: any) => props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? '50%' : '0'};
                    left: ${(props: any) => props.thumbMode === 'w-full' || props.thumbMode === 'h-full' ? '50%' : '0'};
              }
            }
          }
        }
      }
    }
  }
`