import styled from 'styled-components'

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

export const EmptyContainer = styled.div`
  min-height: ${rem(80)};
  display: flex;
  justify-content: center;
  align-items: center;
`

export const BtnGroup = styled.div<{
  fixed: boolean;
  isEdit: boolean;
  clientHeight: number;
  viewportLeft: number;
  show: boolean;
}>`
  display: ${props => props.show ? 'block' : 'none'};
  ${props => props.fixed ? `
    position: fixed;
    bottom: ${
      props.isEdit 
        ? `${props.clientHeight > 812 ? `${((props.clientHeight - 812) / 2) + 10 + 29}px` : '39px'}` 
        : `${rem(20)}`
    };
    left: 0;
    ${
      props.isEdit
        ? `
          left: ${props.viewportLeft}px;
        `
        : `
          display: flex;
          justify-content: center;
          width: 100%;
        `
    }
    z-index: 99;
  ` : `
    text-align: center;
  `}
`

export const SignupImgBtn = styled.img<{
  btnWidth: number;
}>`
  width: ${props => props.btnWidth ? `${props.btnWidth}rem` : '10rem'};
`

export const SignupBtn = styled.div<{
  backgroundColor: string;
  color: string;
  isSignup: boolean;
  btnBackgroundImage?: {
    url: string;
    width: number;
    height: number;
  };
  btnWidth: number;
}>`
  width: ${props => props.btnWidth}rem;
  height: ${rem(100)};
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: ${rem(57)};
  font-weight: 600;
  font-size: ${rem(34)};
  background-color: ${props => props.isSignup ? '#CCCCCC' : props.backgroundColor};
  color: ${props => props.isSignup ? '#ffffff' : props.color};
  ${props => !props.isSignup && `
    &:active {
      opacity: 0.8;
    }
  `}
`

export const ReSignupBtn = styled.div`
  width: ${rem(150)};
  font-size: ${rem(24)};
  line-height: ${rem(48)};
  margin: 0 auto ${rem(10)} auto;
  color: #434343;
  text-decoration-line: underline;
`