import styled from '@emotion/styled';

import { mediaQuery } from '../../foundation/Media';
import { shouldNotForwardProps } from '../../utils/should-not-forward-props';

export const NavBox = styled('div', shouldNotForwardProps(['responsive']))<{
  responsive?: boolean;
}>`
  display: flex;
  align-items: center;
  padding: 10.5px 0px;
  background-color: transparent;

  ${({ responsive }) =>
    responsive &&
    `
      @media (${mediaQuery.tabletDeviceAndDown}) {
        flex-direction: column;
      }
    `}
`;