import styled from 'styled-components'
import { rem as rem750, zIndex} from '../style/function.style'
const rem = (px: number) => rem750(px, 848);

export const BottomTabContainer  = styled.div<{
  marginTop:string
}>`
  position: fixed;
  bottom: 0;
  left: 0;
  height: ${rem(204)};
  border-radius: ${rem(30)} ${rem(30)} 0 0;
  background: #fff;
  z-index:${zIndex('bottom-tab')};
  .tab-wrapper{    
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    .tab-item{
      flex: 1 0 0;
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center center;
      &:nth-last-of-type(1){
        margin-right: 0;
      }
    }
  }
`