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

export const TabContainer = styled.div`
  height: 100%;
  display: flex;
  min-height: 0;
  flex-direction: column;
`
export const Nav = styled.ul<{
  color?: string,
  height?: number,
}>`
  margin: ${rem(24)} 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: ${props => props.height ? rem(props.height) : rem(72)};
  border-radius: ${rem(72)};
  flex-shrink: 0;
  background: #F2F2F2;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: ${rem(144)};
    ${
      props => props.color ? `
        border: 1px solid ${props.color};
      ` : ``
    }
  }
`
export const NavItem = styled.li<{
  height?: number,
  navHeight?: number,
  total: number,
  image?: {
    url: string,
    width: number,
    height: number,
  },
  selected: boolean,
  color?: string,
  activeColor?: string,
}>`
  height: ${props => props.height ? rem(props.height) : rem(72)};
  ${props => {
    const { navHeight = 72, height = 72 } = props;
    if (navHeight - height > 2) {
      return `margin: 0 ${rem((navHeight - height) / 2)};`
    }
    return '';
  }}
  flex: 1 0 0;
  /* width: ${rem(164)}; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: ${rem(24)};
  text-align: center;
  ${
    props => props.color ? `
      color: ${props.color};
    ` : `
      color: #B3B3B3;
    `
  }
  ${props => props.total > 3 ? '' : `
    flex: 1;
  `}
  ${props => props.selected ? `
    background: #FFF;
    border-radius: ${rem(72)};
    font-weight: bold;
    position: relative;
    ${props.activeColor ? 'color:' + props.activeColor + ';' : ''}
    &::after{
      content: '';
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      border-radius: ${rem(144)};
      border: 1px solid ${props.color};
    }
  ` : ''}
`

export const Content = styled.div`
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  &::-webkit-scrollbar{
    display: none;
  }
`