import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';

import theme from 'utils/theme';
import { forDesktopUp } from 'utils/styles/mixins';

export interface NavigationListProps {
  inline: boolean;
}

export const NavigationList: StyledComponent<any, any, any> = styled.ul`
  list-style: none;
  display: ${(props: NavigationListProps): string => props.inline ? 'flex' : 'block'};
  margin-bottom: 40px;
  ${forDesktopUp(css`
    margin-bottom: 0;
  `)};
`;

export const NavigationLink = css`
  display: block;
  color: ${theme.colors.textDark};
`;

export const NavigationItem: StyledComponent<any, any, any> = styled.li`
  padding: 0 ${(props: NavigationListProps): string => props.inline ? '20px' : '0'};
`;