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

export const Container = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  height: ${rem(108)};
`;


export const NavLinkItem = styled.a`
  position: relative;
  flex: 1 1 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  &::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: ${rem(1)};
    height: ${rem(71)};
    background: #ededed;
  }

  &:first-child {
    &::before {
      display: none;
    }
  }
`;

export const NavItemIcon = styled.img`
  flex: 0 0 auto;
  display: block;
  width: ${rem(64)};
  height: ${rem(64)};
  margin-right: ${rem(24)};
`;

export const NavItemText = styled.span`
  flex: 0 0 auto;
  font-size: ${rem(28)};
  color: #2e2e2e;
`;