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.7);
  z-index: 0;
`

export const CloseIcon = styled.div`
  width: ${rem(96, 1125)};
  height: ${rem(180, 1125)};
  position: absolute;
  right: ${rem(20, 1125)};
  top: ${rem(-174, 1125)};
  background: url(https://lofter.lf127.net/1692349850174/modal-close-1.png) no-repeat center;
  background-size: contain;
`

export const Content = styled.div`
  position: absolute;
  width: ${rem(717, 1125)};
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: #fff;
  border-radius: ${rem(48, 1125)};
  box-sizing: content-box;
  padding: ${rem(84, 1125)} ${rem(84, 1125)} ${rem(48, 1125)} ${rem(84, 1125)};
  text-align: center;
`

export const Title = styled.div`
  color: #2e2e2e;
  font-size: ${rem(50, 1125)};
  font-weight: 500;
  line-height: 1.4;
`

export const Desc = styled.div`
  color: #2e2e2e;
  font-size: ${rem(42, 1125)};
  line-height: 1.7;
`

export const Image = styled.img`
  width: ${rem(506, 1125)};
  height: ${rem(506, 1125)};
  border-radius: ${rem(30, 1125)};
  margin: ${rem(31, 1125)} auto ${rem(84, 1125)};
  display: flex;
  align-items: center;
  justify-content: center;
`

export const Button = styled.button<{
  color?: string,
  isAlready?: boolean,
  isDisable?: boolean
}>`
  width: ${rem(693, 1125)};
  height: ${rem(132, 1125)};
  border-radius: ${rem(300, 1125)};
  color: #ffffff;
  font-size: ${rem(44, 1125)};
  font-weight: 500;
  line-height: 1.6;
  background: ${props => props.color ? props.color : '#D1B37E'};
  ${props => props.isAlready ? 'opacity: .5;' : ''}
  ${props => props.isDisable ? 'background: #EAEAEA; color: #C7C7C7;' : ''}
`