import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';
import { Flex, Text } from '@rebass/emotion';
import { forDesktopUp } from 'utils/styles/mixins';

export const SortByContainer: StyledComponent<any, any, any> = styled(Flex)`
  align-items: center;
  justify-content: ${({ maxWidth }) => maxWidth ? 'space-between' : 'flex-start'};
  width: 100%;
`;

export const Title: StyledComponent<any, any, any> = styled(Text)`
  ${forDesktopUp(css`
    flex-grow: 1;
  `)};
`;