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

export const Container = styled.div<{
  show: boolean,
  isEdit?: boolean,
}>`
  position: ${props => props.isEdit ? 'absolute' : 'fixed'};
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: ${zIndex('modal')};
  display: ${props => props.show ? 'block' : 'none'}
`

export const Mask = styled.div<{
  isEdit?: boolean,
}>`
  position: ${props => props.isEdit ? 'absolute' : 'fixed'};
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
`

export const Content = styled.div<{
  backgroundImage?: string,
  color: string,
}>`
  position: absolute;
  width: ${rem(702)};
  height: ${rem(614)};
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: #fff;
  border-radius: ${rem(20)};
  .choose{
    position: absolute;
    width: ${rem(164)};
    height: ${rem(43)};
    top: ${rem(37)};
    right: ${rem(35)};
    font-size: 0;
    border-radius: ${rem(43)};
    background: url('https://lofter.lf127.net/1647920110939/address_btn.png') no-repeat;
    background-size: 100% auto;
  }
  .title{
    margin-top: ${rem(64)};
    text-align: center;
    font-size: ${rem(36)};
    line-height: ${rem(50)};
    font-weight: 600;
    color: #2E2E2E;
  }
  .main{
    margin-top: ${rem(48)};
  }
  .item{
    height: ${rem(42)};
    font-size: 0;
    margin-left: ${rem(48)};
    margin-bottom: ${rem(48)};
    &.long{
      height: ${rem(84)};
    }
    label{
      display: inline-block;
      color: #2E2E2E;
      font-size: ${rem(28)};
      width: ${rem(120)};
      margin-right: ${rem(32)};
      vertical-align: top;
    }
    input,textarea{
      width: ${rem(454)};
      background: none;
      font-size: ${rem(28)};
      color: #2E2E2E;
      line-height: ${rem(42)};
      &::placeholder{
        color: #B3B3B3;
      }
    }
    input{
      height: ${rem(42)};
      display: inline-block;
    }
  }
  .submit{
    display: block;
    width: ${rem(462)};
    height: ${rem(86)};
    color: #fff;
    margin: ${rem(48)} auto 0;
    text-align: center;
    line-height: ${rem(86)};
    border-radius: ${rem(86)};
    font-size: ${rem(36)};
    background: ${props => props.color};
    &:active{
      opacity: .7;
    }
  }
`