import styled from 'styled-components'
import {rem} from '../style/function.style'


export const productCouponListContainer  = styled.div`
    margin: auto;
    .product-list-wrap{
        width: ${rem(702)};
        padding: ${rem(24)} ${rem(24)} 0 ${rem(24)};
        margin-left: auto;
        margin-right: auto;
        // background: #FFF;
        // box-shadow: 0 ${rem(2)} ${rem(30)} 0 rgba(150,150,150,0.11);
        border-radius: ${rem(16)};
        -webkit-border-radius: ${rem(16)};
    }
    .list{
       margin-right: -${rem(24)};
       display: flex;
      //  justify-content: center;
       align-items: center;
       flex-wrap: wrap;
    }
    .product-item{
        display: inline-block;
        vertical-align: top;
        margin: 0 ${rem(24)} ${rem(24)} 0;
    }
`

export const ColumnBox = styled.div`
  &::after{
    content: '';
    display: table;
    clear: both;
  }
`

export const ProductCouponContainer  = styled.a`
  position:relative;
  display: block;
  -webkit-tap-highlight-color:transparent;
  width: ${rem(200)};
  // overflow: hidden;
  font-size: ${rem(24)};

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .imgwrap{
    width: ${rem(160)};
    height: ${rem(160)};
    position: relative;
    border-radius:${rem(8)};
    overflow:hidden;
    -webkit-border-radius:${rem(8)};
  }
  .imgwrap img{
    display: block;
    width: 100%;
    border-radius:${rem(8)};
    position:absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    -webkit-border-radius:${rem(8)};
  }
  // .imgwrap img[lazy="loading"]{
  //     background-color: #f5f5f5;
  // }
  // .imgwrap img[lazy="error"]{
  //     width: 100%;
  //     height: 100%;
  // }

  .name{
    font-size: ${rem(26)};
    line-height: ${rem(36)};
    color: #2E2E2E;
    font-family: "PingFangSC-Medium";
    width: 100%;
    margin-top: ${rem(16)};
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .button{
    width: ${rem(160)};
    max-width: 100%;
    padding: ${rem(14)} ${rem(24)};
    background: #FF6C93;
    border: ${rem(1)} solid #FF6C93;
    color: #FFFFFF;
    box-shadow: ${rem(0)} ${rem(8)} ${rem(32)} rgba(255, 108, 147, 0.4);
    border-radius: ${rem(40)};
    margin-top: ${rem(16)};
    font-size: ${rem(26)};
    font-weight: 500;
    &.disabled{
      background: #F5F5F5;
      border: ${rem(1)} solid #CCCCCC;
      color: #CCCCCC;
      box-shadow: none;
    }
  }
}
`