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


export const BottomTabContainer  = styled.div<{
  marginTop:string
}>`
  margin: 0 auto;
  width:${rem(750)};
  // min-height:${rem(100)};
  z-index:${zIndex('bottom-tab')};
  .tab-wrapper{
    margin:0 auto;
    width:${rem(750)};
    position:fixed;
    bottom:0;
    z-index:${zIndex('bottom-tab')};
    .tab-items{
      position:absolute;
      top:${props=>rem(props.marginTop)};
      left:0;right:0;
      margin:${rem(20)} auto;
      width:${rem(686)};
      display:flex;
      justify-content:space-between;
    }
    .tab-item{
      display:flex;
      flex:1 1 auto;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      // width:${rem(130)};
      height:100%;
      .icon{
        // width:${rem(80)};
        height:${rem(115)};
        overflow:hidden;
      }
    }
  }
`