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

export const Container = styled.div`
  margin: auto;
  .dressingBox{
    width: 100%;
    height: ${rem(765)};
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: cover;
  }
  .dressingContent{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .dressingImg {
    position: absolute;
    left: ${rem(40)};
    bottom: ${rem(42)};
    width: ${rem(168)};
    height: ${rem(168)};
    border: ${rem(2)} solid #FFFFFF;
    border-radius: ${rem(32)};
    box-sizing: border-box;
  }
  
  .svgImg {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
  .dressingImgBox {
    position: relative;
    width: ${rem(248)};
    height: ${rem(280)};
    margin-top: ${rem(80)};
    margin-bottom: ${rem(30)};
  }
  
  .bkgImg {
    width: 100%;
  }
  .avatarContent{
    width: 100%;
    height: ${rem(670)};
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: cover;
  }
  .musicVipBox{
    width: 100%;
    height: ${rem(518)};
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: cover;
  }
  .musicVipContent{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .imgwrap{
    width: ${rem(248)};
    height: ${rem(300)};
    margin-bottom: ${rem(20)};
  }
  .avatarImg{
    width: ${rem(234)};
    height: ${rem(234)};
  }
  .musicVipImg{
    width: ${rem(348)};
    margin-bottom: ${rem(8)};
  }
  .name{
    font-size: ${rem(32)};
    font-weight: 500;
    text-align: center;
    color: #2E2E2E;
    margin-bottom: ${rem(4)};
  }
  .text{
    font-size: ${rem(24)};
    text-align: center;
    color: #8F8F8F;
  }
  .button{
    width: ${rem(320)};
    max-width: 100%;
    padding: ${rem(22)} ${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(50)};
    margin-top: ${rem(36)};
    font-size: ${rem(26)};
    font-weight: 500;
    letter-spacing: 0.1em;
    &.disabled{
      background: #F5F5F5;
      border: ${rem(1)} solid #CCCCCC;
      color: #CCCCCC;
      box-shadow: none;
    }
  }
`