import styled from 'styled-components';
import {NavButton} from '../nav-button';
import {View} from 'react-native';

export const HeaderContainer = styled(View)`
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: ${({theme: {spacing}}) => spacing[4]}px;
  padding-left: ${({theme: {spacing}}) => spacing[3]}px;
`;

export const LogoContainer = styled(View)`
  margin-right: auto;
`;

export const StyledNavButton = styled(NavButton)`
  padding: ${({theme: {spacing}}) => spacing[2]}px
    ${({theme: {spacing}}) => spacing[4]}px;
`;

export const ActionButtonContainer = styled(View)`
  padding: 0 ${({theme: {spacing}}) => spacing[4]}px;
`;