import styled from 'styled-components'

import {
  rem,
  zIndex
} from '../../style/function.style'

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

export const ModalMask = styled.div`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
`

export const ModalContent = styled.div`
  position: absolute;
  width: ${rem(686)};
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  border-radius: ${rem(32)};
  background-color: #ffffff;
`

export const ModalScroll = styled.div`
  max-height: calc(100% - ${rem(220)});
  padding-bottom: ${rem(40)};
  overflow-y: scroll;
  overflow-x: hidden;
`

export const ModalContentHeader = styled.div`
  padding: ${rem(77)} ${rem(79)} 0;
  &::after {
    content: '';
    display: inline-block;
    height: 0;
    width: ${rem(638 * 2)};
    border-bottom: 1px solid #bcbcbc;
    transform: scale(0.5);
    transform-origin: 0 center;
    margin: 0 ${rem(-55)};
  }
`
export const ModalContentHeaderTitle = styled.div`
  font-weight: bold;
  font-size: ${rem(48)};
  line-height: 1;
  color: #000000;
  text-align: center;
`

export const ModalContentHeaderDesc = styled.div`
  font-size: ${rem(24)};
  line-height: ${rem(36)};
  letter-spacing: 1px;
  color: #B3B3B3;
  margin: ${rem(22)} 0 ${rem(33)};
`

export const ModalContentBody = styled.div`
  padding: ${rem(35)} 0 ${rem(80)};
`

export const ModalContentQuesItem = styled.div`
  margin-bottom: ${rem(46)};
  padding: 0 ${rem(44)};
  &:last-child {
    margin-bottom: 0;
  }
`

export const ModalContentQuesTitle = styled.div`
  font-weight: bold;
  font-size: ${rem(32)};
  line-height: ${rem(48)};
  color: #000000;
  margin-bottom: ${rem(31)};
  position: relative;
  .required {
    width: ${rem(20)};
    height: ${rem(20)};
    position: absolute;
    top: ${rem(14)};
    left: ${rem(-26)};
  }
`

export const ModalContentFooter = styled.div`
  padding: 0 ${rem(24)} ${rem(67)};
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  &::before {
    content: '';
    display: inline-block;
    height: ${rem(60)};
    width: ${rem(638 * 2)};
    border-top: 1px solid #bcbcbc;
    transform: scale(0.5);
    transform-origin: 0 center;
  }
`

export const ModalContentFooterFlex = styled.div`
  display: flex;
  justify-content: space-around;
`

export const ModalContentFooterBtn = styled.div<{
  type?: 'primary'
}>`
  display: inline-block;
  width: ${rem(292)};
  height: ${rem(100)};
  background-color: ${props => props.type === 'primary' ? '#14C4BC' : '#ffffff'};
  color: ${props => props.type === 'primary' ? '#ffffff' : '#1f1f1f'};
  border-radius: ${rem(49)};
  font-weight: bold;
  font-size: ${rem(34)};
  line-height: ${rem(48)};
  display: flex;
  justify-content: center;
  align-items: center;
  border: ${props => props.type === 'primary' ? 'none' : '1px solid #000000'};
  &:active {
    opacity: 0.6;
  }
`