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 FoldContainer = styled.div<{
  foldHeight?: number;
  fold: boolean;
}>`
  position: relative;
  width: 100%;
  height: 100%;
  max-height: ${props => props.fold && props.foldHeight ? `${props.foldHeight}rem` : '100%'};
  overflow: ${props => props.fold ? 'hidden' : 'visible'};
`

export const FoldBtn = styled.div`
  width: 100%;
  height: ${rem(74)};
  background-color: #E0E0E0;
  font-weight: 500;
  font-size: ${rem(26)};
  line-height: ${rem(40)};
  display: flex;
  justify-content: center;
  align-items: center;
`

export const FoldBtnIcon = styled.img`
  width: ${rem(10)};
  height: ${rem(18)};
  padding: 0 ${rem(12)};
  box-sizing: content-box;
`

export const FoldImg = styled.img`
  width: 100%;
  height: auto;
`